【开源WebGIS】07-Openlayers+Vue 测量功能-01

OpenLayers是一个开源的地图显示引擎，支持距离测量和面积测量。距离测量功能用于测量地图上两点间的直线距离；面积测量功能用于测量地图上一个图形的面积，可以方便的实现在地图上的测量。

1 不多bb，先实现基本的功能

基础功能展示

1.1 测量功能按钮和显示结果框的添加

<el-button-group><el-button type="primary" @click="drawVector('LineString')">距离测量</el-button><el-button type="primary" @click="drawVector('Polygon')">面积测量 </el-button><el-button type="primary" @click="drawVector('None')">清除</el-button></el-button-group><el-input v-model="mensureResult"/>

1.2 需要定位一个基础的map

这里我定义了一个map，并且添加了天地图的服务作为基础底图，天地图服务的key需要自己去天地图官网申请.

initMap() {const view = new View({projection: 'EPSG:3857',center: fromLonLat([104.06244609071975, 30.673525713789157]), //地图中心坐标zoom: 12,});const layer = new TileLayer({source: new XYZ({url:'http://t4.tianditu.com/DataServer?T=vec_w&tk=你自己在天地图申请的keyx={x}&y={y}&l={z}'}),});this.map = new Map({layers: [],target: 'map-container',view: view,});this.map.addLayer(layer);},

1.3 定义一个用来存放测量过程绘制要素的图层

需要注意的是我给这个layer添加了一个name字段，将其命名为measureLayer，以方便在后面的时候不需要的时候删除它。

var source = new VectorSource()var layer = new VectorLayer({source,zIndex:100,name:'mensureLayer'})this.map.addLayer(layer)

1.4 定义一个交互事件draw

注意这个draw它的source为上面定义的source，并将其添加到地图中。

this.sketch = new Feature()
this.map.removeInteraction(this.draw)
this.draw = new Draw({type:type,source:source// 注意这里的source是在前面定义过的source，如果不定义这个sauce//那么这画出来就没法保存
})
this.map.addInteraction(this.draw)

1.4 对于上面定义的draw进行状态判断

如果选择了测量的按钮，再去判断draw当前的状态，是drawend就意味着绘图完毕，这时候就可以从event事件中拿到对应的 future，并根据测量的类型，使用getGeometry()方法，分别获得它的长度或者面积，并将结果显示到结果显示框内。

this.draw.on('drawend',(evt)=>{console.log('结束画')this.sketch = evt.featureif(type == 'LineString'){this.mensureResult = this.sketch.getGeometry().getLength()}else if (type =='Polygon'){this.mensureResult = this.sketch.getGeometry().getArea()}})

如果是选择了清除按钮，则需要进行三步操作：

清除draw交互事件
清除测量的图层layer
清除测量的结果mensureResult

// 清除交互this.map.removeInteraction(this.draw)// 清除测量的图层console.log(this.map.getAllLayers())this.map.getAllLayers().forEach(element => {if (element.values_.name == 'mensureLayer')this.map.removeLayer(element)});// 清除测量结果this.mensureResult = null

到这里就基本上把测量长度和面积的功能实现了，但是还有很多细节没有完善，接下来继续完善功能。

获取代码

关注公粽号“老靳的WebGIS”回复ol07获取

参考文章：

https://codesandbox.io/s/measure-forked-clft8u?file=/main.js:812-835https://blog.csdn.net/MagicMHD/article/details/91372480https://www.jianshu.com/p/3cd4c25bed47https://blog.csdn.net/qq_37219845/article/details/105557335

【开源WebGIS】07-Openlayers+Vue 测量功能-01相关推荐

【开源WebGIS】07-Openlayers+Vue 测量功能-02
在上一节中,我们实现了基础的测量功能.但是实现的测量功能还有很多问题,还有很多东西可以细化,主要细化以下几个方面: 绘制的提示文字绘制结果的显示最终实现相对完整的测量功能,展示如下: 创建一个绘制 ...
基于openlayers角度测量功能
基于openlayers的测量功能,官网提供了长度测量和角度测量,但是没有角度测量,在此写一下基于openlayers的角度测量功能,主要方法如下: var formatAngle = functio ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
开源WebGIS实施方案（一）：开篇 [转]
开源WebGIS实施方案(一):开篇 GIS 起源于上世纪六十年代,发展到现如今,也早已不再是某些专业领域的"阳春白雪".放眼当下,各商业GIS软件有如群雄逐鹿,大有风起云涌之势: ...
开源WebGIS实施方案
开源WebGIS实施方案 http://www.cnblogs.com/hans_gis/archive/2012/09/21/2696880.html GIS起源于上世纪六十年代,发展到现如今,也早 ...
开源WebGIS架构
开源WebGIS架构目前国际上著名的地理空间信息生产商大都拥有了成熟的产品线, 基本涵盖了从数据采集.数据编辑.数据管理.空间数据互操作.空间分析到网络地理信息服务注册.发布.聚合等所有地理信息工程 ...
webgis从基础到开发实践_开源WebGIS教程系列——11.1 GISLite 的开发背景与设计
地理信息门户可以帮助人们更容易地发现.访问和使用地理空间信息, 是地理信息发布.服务和共享的重要环节.许多国家都很重视地理信息门户的建设,把它作为国家空间数据基础设施(spatial data in ...
开源地图服务器网站,开源WebGIS：地图发布与地图服务
开源WebGIS:地图发布与地图服务语音编辑锁定讨论上传视频上传视频本词条缺少信息栏.概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! <开源WebGIS:地图发布与 ...
开源WEBGIS（五）WEBGIS五剑客之GIS服务
地图服务器通常也称作地图引擎,它是WebGIS架构的核心,所有的地图操作都是通过地图服务器完成的.现在的主流开源地图服务器主要是MapServer和GeoServer.GIS 应用服务器,主要用来接收 ...