【开源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 =newOverlay({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 =newOverlay({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 output
      if(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的变化，实现以下两个功能：

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

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());}elseif(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获取