场景

Vue+Openlayer使用Draw实现交互式绘制线段：

Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上实现的交互式绘制线段，还可以实现绘制多边形并直接计算出面积。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、导入基本模块

//导入基本模块 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Fill,Style,Stroke} from "ol/style"; //导入相关模块 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、绘制结束时触发的事件中获取所绘制面积

        //绘制结束时触发的事件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()})

这里在绘制结束事的回调方法中直接获取geometry，然后调用ol自带的getArea方法，计算出面积

计算面积在线演示地址

ol-measure - CodeSandbox

4、完整示例代码

​ <template><div id="app"><div id="map" class="map"></div></div> </template><script> //导入基本模块 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Fill,Style,Stroke} from "ol/style"; //导入相关模块 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代表勾绘的要素属于的数据集source: self.lineSource,//type 表示勾绘的要素包含的 geometry 类型type: type})//绘制结束时触发的事件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({//不能设置为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({//地图中心点center: [987777.93778, 213834.81024],zoom: 14,minZoom:6, // 地图缩放最小级别maxZoom:19,}),});// 获取点击地图的坐标(选中样式)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)//调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circlethis.onAddInteraction('Polygon')},}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>​

总结

以上是生活随笔为你收集整理的Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。