首先繪制圓，首先有一個(gè)數(shù)據(jù)源和一個(gè)圖層來存放繪制的圓形，這個(gè)很簡(jiǎn)單。然后創(chuàng)建變量自己該就可以，我估計(jì)都搞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,   // 圖層的層級(jí)
})
layerPoint.setSource(sourcePoint)  // 把數(shù)據(jù)源綁定到圖層上面
map.addLayer(layerPoint)  // 把圖層添加到地圖上面去

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

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

通過上面圖看，剛剛我們做的，往地圖上添加 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米為半徑的圓，但是這個(gè)半徑不是很準(zhǔn)，沒解決了
        })
        feature.setStyle(
          new Style({
            fill: new Fill({
              color: 'rgba(32, 157, 230, 0.5)'
            })
          })
        )
        sourcePoint .addFeatures([feature])
      },

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

繪制多邊形

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

繪制

首先繪制和上面一樣，只要是圖層，就哪幾層才能顯示在地圖上，所以呢，先創(chuàng)建圖層、數(shù)據(jù)源添加到地圖，然后呢，因?yàn)槭鞘髽?biāo)繪制，所以說需要設(shè)置一下繪制完成的多邊形在地圖上什么樣式，然后在一個(gè)就是添加鼠標(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',
        });

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

	map.addInteraction(modify);
        map.addInteraction(draw);
        map.addInteraction(snap);
        draw.on('drawend', e => {//繪畫完成觸發(fā)時(shí)間
          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('頂點(diǎn)坐標(biāo)是：' + JSON.stringify(points))
          map.removeInteraction(draw);  //移除交互
          map.removeInteraction(snap);  //移除交互
          map.removeInteraction(modify);  //移除交互
        });

編輯多邊形

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

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

完成繪制

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

	map.removeInteraction(draw);//移除繪畫互動(dòng)
        map.removeInteraction(snap);//移除繪畫互動(dòng)
        map.removeInteraction(modify);//移除繪畫互動(dòng)
        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('頂點(diǎn)坐標(biāo)是：' + JSON.stringify(points))

這里不貼圖了

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

您可能感興趣的文章: