Vue+Openlayers實現輸入坐標在地圖上打點定位顯示並以該點為中心放大

場景

Openlayers中使用animate實現車輛定位導航效果(以當前車輛為中心移動)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118634344

與上面實現類似的效果，在vue中實現輸入坐標，然后在地圖上顯示該點，並且

以該點為地圖中心放大。

 

 

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、加載地圖實現

Vue中使用Openlayers加載Geoserver發布的TileWMS：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949

2、頁面上新增兩個輸入框和兩個按鈕

<template>
    <div class="app-container" style="height: 98%">
        <div class="shape_box">
            <div class="btn_box">
                <el-input v-model="inputX" placeholder="坐標X"></el-input>
                <el-input v-model="inputY" placeholder="坐標Y"></el-input>
                <el-button type="primary" @click="position()">
                    <span>坐標定位</span>
                </el-button>
                <br><br>
                <el-button type="primary" @click="clearPosition()">
                    <span>清除定位點</span>
                </el-button>
            </div>
        </div>
        <div class="gj_content">
            <div id="gjMap"></div>
        </div>
    </div>
</template>

3、兩個輸入框分別與坐標X和Y綁定，所以聲明兩個變量

            return {       
                positionLayer: null,
                positionSource: null,
                map: null, // 地圖
                layers: null, // 地圖圖層
                inputX: null,
                inputY:null,
            };
        },

並且新建一個打點顯示的圖層positionLayer以及其數據源positionSource

4、頁面加載完成初始化地圖時初始化該圖層

                    this.positionSource = new VectorSource();
                    this.positionLayer = new VectorLayer({
                        source: this.positionSource,
                    });

5、將圖層添加到map

                    this.map = new Map({
                        layers: [this.layers,this.positionLayer],
                        target: "gjMap",
                        view: new View({
                            projection: "EPSG:900913",
                            center: window.config.center,
                            zoom: window.config.zoom,
                        }),
                        //加載控件到地圖容器中
                        controls: defaultControls({
                            zoom: false,
                            rotate: false,
                            attribution: false
                        })
                    });
                });

6、坐標定位的按鈕的點擊事件的實現

 

           //輸入坐標定位顯示
            position(){
                let self = this;
                if(self.inputX && self.inputY){
                    self.positionSource.clear();
                    var feature = new Feature({
                        geometry: new Point([
                            Number(self.inputX),
                            Number(self.inputY)
                        ])
                    })
                    let style = new Style({
                        image: new Icon({
                            src: "/images/inputPosition.png",
                            anchor: [0.48, 0.52],
                        }),
                    });
                    // 添加點的樣式
                    feature.setStyle(style);
                    // 添加線的fature
                    self.positionSource.addFeature(feature);
                    //定位中間點
                    var to = [
                            Number(self.inputX),
                            Number(self.inputY)
                        ];
                    var view = self.map.getView();
                    view.setZoom(18);
                    view.animate({
                        center: to,
                        duration: 5,
                    });
                }
            },

這里沒做坐標數據格式准確性校驗，先清除掉圖層的source,然后新增一個feature,並將其添加到source中。

然后跳轉到以該點為中心點，並設置地圖縮放等級。

9、清除按鈕的點擊事件方法實現

            //清除定位的點
            clearPosition(){
                let self = this;
                self.positionSource.clear();
            },