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

最新推荐文章于 2024-08-06 16:25:08 发布

老靳的WebGIS

最新推荐文章于 2024-08-06 16:25:08 发布

阅读量1.2k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_35093027/article/details/128907743

版权

开源WebGIS 专栏收录该内容

7 篇文章 7 订阅

订阅专栏

文章介绍了如何细化地图测量功能，包括创建绘制提示和显示测量结果的函数，以及测量线长度和面面积的格式化方法。通过监听draw的drawstart事件来实时更新测量结果，并在清除按钮中增加清除交互、文字、测量图层和测量结果的功能。代码示例基于OpenLayers库。

摘要由CSDN通过智能技术生成

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

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

在这里插入图片描述
最终实现相对完整的测量功能，展示如下：

创建一个绘制提示的函数

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 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的变化，实现以下两个功能：

将最新生成的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);