場(chǎng)景

Vue+Openlayer使用Draw實(shí)現(xiàn)交互式繪制線段：

Vue+Openlayer使用Draw實(shí)現(xiàn)交互式繪制線段_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基礎(chǔ)上實(shí)現(xiàn)的交互式繪制線段，還可以實(shí)現(xiàn)繪制多邊形并直接計(jì)算出面積。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、導(dǎo)入基本模塊

//導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Fill,Style,Stroke} from "ol/style"; //導(dǎo)入相關(guān)模塊 import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer' import { TileWMS ,Vector as VectorSource } from 'ol/source' import { Select, Draw } from 'ol/interaction' import { getArea } from "ol/sphere";

2、與前面博客相比，繪圖工具傳遞的類型為Polygon

this.onAddInteraction('Polygon')

3、繪制結(jié)束時(shí)觸發(fā)的事件中獲取所繪制面積

??????? //繪制結(jié)束時(shí)觸發(fā)的事件this.draw.on('drawend', function(e) {const geometry = e.feature.getGeometry()var area = getArea(geometry);console.log("area="+area)var output;if (area > 10000) {output = (Math.round(area / 1000000 * 100) / 100) +' ' + 'km²';} else {output = (Math.round(area * 100) / 100) +' ' + 'm²';}console.log("output="+output)let pointArr = geometry.getCoordinates()self.coordinate.push(pointArr)console.log("self.coordinate="+self.coordinate);self.removeDraw()})

這里在繪制結(jié)束事的回調(diào)方法中直接獲取geometry，然后調(diào)用ol自帶的getArea方法，計(jì)算出面積

計(jì)算面積在線演示地址

ol-measure - CodeSandbox

4、完整示例代碼

? <template><div id="app"><div id="map" class="map"></div></div> </template><script> //導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Fill,Style,Stroke} from "ol/style"; //導(dǎo)入相關(guān)模塊 import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer' import { TileWMS ,Vector as VectorSource } from 'ol/source' import { Select, Draw } from 'ol/interaction' import { getArea } from "ol/sphere"; export default {name: "olMapTileWMSDrawPolygon",data() {return {map: null, // map地圖layer:null, //地圖圖層lineLayer:null, //線圖層draw: null,lineSource:null,coordinate: [],};},mounted() {this.initMap();},methods: {// 繪圖工具onAddInteraction(type) {let self = this//勾繪矢量圖形的類this.draw = new Draw({//source代表勾繪的要素屬于的數(shù)據(jù)集source: self.lineSource,//type 表示勾繪的要素包含的 geometry 類型type: type})//繪制結(jié)束時(shí)觸發(fā)的事件this.draw.on('drawend', function(e) {const geometry = e.feature.getGeometry()var area = getArea(geometry);console.log("area="+area)var output;if (area > 10000) {output = (Math.round(area / 1000000 * 100) / 100) +' ' + 'km²';} else {output = (Math.round(area * 100) / 100) +' ' + 'm²';}console.log("output="+output)let pointArr = geometry.getCoordinates()self.coordinate.push(pointArr)console.log("self.coordinate="+self.coordinate);self.removeDraw()})self.map.addInteraction(this.draw)},//刪除交互removeDraw() {this.map.removeInteraction(this.draw)},initMap() {//地圖圖層this.layer = new TileLayer({source: new TileWMS({//不能設(shè)置為0，否則地圖不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});//線的圖層this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [this.layer,this.lineLayer],view: new View({//地圖中心點(diǎn)center: [987777.93778, 213834.81024],zoom: 14,minZoom:6, // 地圖縮放最小級(jí)別maxZoom:19,}),});// 獲取點(diǎn)擊地圖的坐標(biāo)(選中樣式)let selectedStyle = new Style({fill: new Fill({color: 'rgba(1, 210, 241, 0.2)'}),stroke: new Stroke({color: 'yellow',width: 4})})// 選擇線的工具類this.selectTool = new Select({multi: true,hitTolerance: 10, // 誤差style: selectedStyle // 選中要素的樣式})//添加交互this.map.addInteraction(this.selectTool)//調(diào)用繪圖工具并傳遞類型為線，其他類型有Point,LineString,Polygon,Circlethis.onAddInteraction('Polygon')},}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>?

總結(jié)

以上是生活随笔為你收集整理的Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。