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

在上一节中，我们实现了基础的测量功能。但是实现的测量功能还有很多问题,还有很多东西可以细化，主要细化以下几个方面：

绘制的提示文字
绘制结果的显示

最终实现相对完整的测量功能，展示如下：

创建一个绘制提示的函数

createHelpTooltip() {if (this.helpTooltipElement) {this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);}this.helpTooltipElement = document.createElement('div');this.helpTooltipElement.className = 'ol-tooltip hidden';this.helpTooltip = new Overlay({element: this.helpTooltipElement,offset: [15, 0],positioning: 'center-left',});this.map.addOverlay(this.helpTooltip);
},

创建一个显示测量结果的函数

createMeasureTooltip() {if (this.measureTooltipElement) {this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement);}this.measureTooltipElement = document.createElement('div');this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';this.measureTooltip = new Overlay({element: this.measureTooltipElement,offset: [0, -15],positioning: 'bottom-center',stopEvent: false,insertFirst: false,});this.map.addOverlay(this.measureTooltip);
},

创建一个测量线的长度的函数

formatLength(line){var length length = Math.round(line.getLength() * 100) / 100; //直接得到线的长度var outputif (length > 100) {output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位} else {output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位}return output;//返回线的长度},

创建一个测量面的面积的函数

formatArea(polygon){var area//直接获取多边形的面积area = polygon.getArea()var output;if (area > 10000) {output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>'; //换算成KM单位} else {output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';//m为单位}return output; //返回多边形的面积}

监听draw的做drawstart事件

这一步的操作是通过监听event事件的geometry的变化，实现以下两个功能：

将最新生成的geometry首先传递进入面积测量和距离测量的函数中，计算得到面积和距离的结果。
将测量结果显示在线要素的最后一个坐标/面要素的中心位置

this.draw.on('drawstart',(evt)=>{this.sketch = evt.feature //绘制的要素this.sketch.getGeometry().on('change',(evt)=>{var geom = evt.target;//绘制几何要素if (type =='Polygon') {this.measureTooltipElement.innerHTML = this.formatArea(this.sketch.getGeometry())//计算面积this.measureTooltip.setPosition(geom.getInteriorPoint().getCoordinates());} else if (type == 'LineString') {//计算长度this.measureTooltipElement.innerHTML = this.formatLength(this.sketch.getGeometry())this.measureTooltip.setPosition(geom.getLastCoordinate());}})})

在清除按钮中增加更多功能

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

获取代码

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

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

【开源WebGIS】07-Openlayers+Vue 测量功能-01
OpenLayers是一个开源的地图显示引擎,支持距离测量和面积测量.距离测量功能用于测量地图上两点间的直线距离:面积测量功能用于测量地图上一个图形的面积,可以方便的实现在地图上的测量. 1 不多bb ...
基于openlayers角度测量功能
基于openlayers的测量功能,官网提供了长度测量和角度测量,但是没有角度测量,在此写一下基于openlayers的角度测量功能,主要方法如下: var formatAngle = functio ...
【Qt 开源音视频框架模块QtAV】02:QTAV多功能播放器
前言在[Qt 开源音视频框架模块QtAV]01:介绍.编译以及简单使用中我们已经完成了QTAV的项目部署和简单案例的测试,下面我再分享下QTAV提供的播放器例程. 程序功能效果展示演示的项目在QT ...
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】07-Openlayers+Vue 测量功能-02

创建一个绘制提示的函数

创建一个显示测量结果的函数

创建一个测量线的长度的函数

创建一个测量面的面积的函数

监听draw的做drawstart事件

在清除按钮中增加更多功能

获取代码

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

最新文章

热门文章