快捷導(dǎo)航

Vue使用openlayers實現(xiàn)繪制圓形和多邊形

更新時間：2022年06月18日 08:37:13 作者：秦浩鋮

這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動手嘗試一下

繪制圓形

這里的繪制圓是指當(dāng)后臺返回數(shù)據(jù)，告訴你以某個經(jīng)緯度坐標(biāo)為圓心，或者是頂點，以 r 為半徑繪制，不是鼠標(biāo)手動繪制。

首先繪制圓，首先有一個數(shù)據(jù)源和一個圖層來存放繪制的圓形，這個很簡單。然后創(chuàng)建變量自己該就可以，我估計都搞openlayer了，這些基礎(chǔ)應(yīng)該不至于不知道，我這邊就寫關(guān)鍵代碼，我想應(yīng)該沒問題，我用的是默認(rèn)3857坐標(biāo)，不是4326。

sourcePoint = new VectorSource()   // 創(chuàng)建數(shù)據(jù)源
layerPoint = new VectorLayer({     // 創(chuàng)建圖層
    zIndex: 1,   // 圖層的層級
})
layerPoint.setSource(sourcePoint)  // 把數(shù)據(jù)源綁定到圖層上面
map.addLayer(layerPoint)  // 把圖層添加到地圖上面去

好的，通過上面的代碼實現(xiàn)了創(chuàng)建一個圖層在地圖上來放置繪制的圓形。

接下來就是向這個數(shù)據(jù)源去添加圓形，這個呢，還是嘛，和我之前寫的博客差不多，那幾部分相互嵌套，我還是把圖在貼一下吧，這個圖是大佬整理的，我直接拿來用了。

通過上面圖看，剛剛我們做的，往地圖上添加 layer 圖層完成了，向 layer 添加 source 數(shù)據(jù)源也完成了。下一步就是往 source 中添加 feature 了。

	  // 繪制圓形
      addCircle() {
        let feature = new Feature({
          title: 'beijing',
          geometry: new Circle(fromLonLat([116.400819, 39.916263]), this.getRadius(500)),  // 創(chuàng)建 以[116.400819, 39.916263]為圓心，500米為半徑的圓，但是這個半徑不是很準(zhǔn)，沒解決了
        })
        feature.setStyle(
          new Style({
            fill: new Fill({
              color: 'rgba(32, 157, 230, 0.5)'
            })
          })
        )
        sourcePoint .addFeatures([feature])
      },

上邊代碼就是實現(xiàn)了在地圖上以某點，某半徑繪制一個圓形，但是半徑不是很準(zhǔn)確，如果有大佬解決了半徑不準(zhǔn)確的問題希望幫忙指點一下。

繪制多邊形

這個地方說的繪制多邊形是指鼠標(biāo)手動繪制，繪制完成可以獲得鼠標(biāo)繪制多邊形的頂點坐標(biāo)。

繪制

首先繪制和上面一樣，只要是圖層，就哪幾層才能顯示在地圖上，所以呢，先創(chuàng)建圖層、數(shù)據(jù)源添加到地圖，然后呢，因為是鼠標(biāo)繪制，所以說需要設(shè)置一下繪制完成的多邊形在地圖上什么樣式，然后在一個就是添加鼠標(biāo)交互的工具，所以說就是下面的代碼。

		source = new VectorSource();
        vector = new VectorLayer({
          source: source,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 3,
            }),
            image: new CircleStyle({
              radius: 3,
              fill: new Fill({
                color: '#ffcc33',
              }),
            }),
          }),
        });
        map.addLayer(vector)
        modify = new Modify({ source: source });
        snap = new Snap({ source: source });
        draw = new Draw({
          source: source,
          type: 'Polygon',
        });

上邊代碼呢，實現(xiàn)了圖層初始化和交互工具的初始化，接下來就是鼠標(biāo)綁定事件繪制。

	map.addInteraction(modify);
        map.addInteraction(draw);
        map.addInteraction(snap);
        draw.on('drawend', e => {//繪畫完成觸發(fā)時間
          const geometry = e.feature.getGeometry()
          const corrdinates = geometry.getCoordinates()
          let points = []
          corrdinates[0].forEach(item => {
            let xy = transform(item, 'EPSG:3857', 'EPSG:4326')  // 轉(zhuǎn)換成經(jīng)緯度坐標(biāo)
            points.push(xy)
          })
          this.$message.success('頂點坐標(biāo)是：' + JSON.stringify(points))
          map.removeInteraction(draw);  //移除交互
          map.removeInteraction(snap);  //移除交互
          map.removeInteraction(modify);  //移除交互
        });

編輯多邊形

再次編輯的話，這個就很簡單了，上一步不是移除了三個嗎？第一個是鼠標(biāo)繪制，編輯的時候除了鼠標(biāo)繪制，其他兩個移除的交互再加上就可以了。

map.addInteraction(modify);
map.addInteraction(snap);

完成繪制

繪制完成的話，在移除交互工具，然后重新獲取一下頂點坐標(biāo)列表就可以了。

	map.removeInteraction(draw);//移除繪畫互動
        map.removeInteraction(snap);//移除繪畫互動
        map.removeInteraction(modify);//移除繪畫互動
        let feature = source.getFeatures()[0]
        const geometry = feature.getGeometry()
        const corrdinates = geometry.getCoordinates()
        let points = []
        corrdinates[0].forEach(item => {
          let xy = transform(item, 'EPSG:3857', 'EPSG:4326')
          points.push(xy)
        })
        this.$message.success('頂點坐標(biāo)是：' + JSON.stringify(points))

這里不貼圖了

到此這篇關(guān)于Vue使用openlayers實現(xiàn)繪制圓形和多邊形的文章就介紹到這了,更多相關(guān)Vue openlayers繪制圓形多邊形內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: