OpenLayers 加载测量控件

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件，如缩放、导航、鹰眼、比例尺、旋转、鼠标位置等。

这些控件都是基于 ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）

本节主要介绍创建测量控件。

1. 创建绘制对象结构

创建绘制对象结构

  Geometry type  
  
    Length
    Area
  
  
    use geodesic measures
  

测量工具及测量提示框样式。

.measure-control {
  position: relative;
  background: #434343a8;
  width: 30%;
  margin: 0 auto;
  top: 19px;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
}

/*提示框信息样式*/
.tooltip{
    position:relative;
    background:rgba(0,0,0,.5);
    border-radius:4px;
    color:#ffffff;
    padding:4px 8px;
    opacity:0.7;
    white-space:nowrap
}
.tooltip-measure{
    opacity:1;
    font-weight:bold
}
.tooltip-static{
    background-color:#ffcc33;
    color:black;
    border:1px solid white
}
.tooltip-measure:before,.tooltip-static:before{
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static:before {
    border-top-color: #ffcc33;
}

2. 创建矢量图层

创建矢量图层需要添加矢量数据源，然后添加矢量图层并设置其样式。

// 创建矢量图层
const vectorSource = new ol.source.Vector()
const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            // 填充色
            color:'rgba(255,255,255,0.2)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33', // 边线颜色
            width: 2.5    // 边线宽度
        }),
        // 圆形点样式
        image: new ol.style.Circle({
            radius: 7, // 圆形点半径
            fill: new ol.style.Fill({
                color:'#ffcc33' // 圆形点填充色
            })
        })
    })
})
map.addLayer(vectorLayer)

3. 添加绘制交互对象

监听选择绘制类型，根据不同类型绘制几何对象

function addInteraction() {
      const type = selectType.value === 'area' ? 'Polygon' : 'LineString'
      draw = new ol.interaction.Draw({
          source: vectorSource,
          type: type,
          style: new ol.style.Style({
              fill: new ol.style.Fill({
                  color:"rgba(255,255,255,0.2)"
              }),
              stroke: new ol.style.Stroke({
                  color:"#ffcc33",
                  lineDash:[10,10],
                  width:2
              }),
              image: new ol.style.Circle({
                  radius: 5,
                  fill: new ol.style.Fill({
                      color:'rgba(255,255,255,0.2)'
                  })
              })
          })
      })
      map.addInteraction(draw)
      createMeasureTooltip() // 测量工具提示框
      createHelpTooltip() // 帮助信息提示框框
      let listener = null
      // 监听开始绘制事件
      draw.on('drawstart', function (evt) {
          // 绘制要素
          sketch = evt.feature
          // 绘制坐标
          let tooltipCoord = evt.coordinate
          // 绑定change事件，根据绘制几何图形类型得到测量距离或者面积，并将其添加到测量工具提示框
          listener = sketch.getGeometry().on('change', evt=> {
              // 绘制的几何对象
              const geom = evt.target
              let output = 0
              if (geom instanceof ol.geom.Polygon) {
                  output = formatArea(geom)
                  tooltipCoord = geom.getInteriorPoint().getCoordinates()
              } else {
                  output = formatLength(geom)
                  tooltipCoord = geom.getLastCoordinate()
              }
              // 将测量值添加到提示框
              measureTooltipElement.innerHTML = output
              // 设置测量提示工具框的位置
              measureTooltip.setPosition(tooltipCoord)
          })
      }, this)

      draw.on('drawend', function(evt) {
          measureTooltipElement.className = 'tooltip tooltip-static'
          measureTooltip.setOffset([0, -7])
          sketch = null
          measureTooltipElement = null
          createMeasureTooltip()
          ol.Observable.unByKey(listener)
      },this)
}

4. 创建帮助信息提示框

function createHelpTooltip() {
    if (helpTooltip) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement)
    }
    helpTooltipElement = document.createElement('div')
    helpTooltipElement.className = 'tooltip hidden'

    helpTooltip = new ol.Overlay({
        element: helpTooltipElement,
        offset: [15, 0],
        positioning:'center-left'
    })
    map.addOverlay(helpTooltip)
}

5. 创建测量提示框

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

6. 创建面积与长度测量方法

// 创建距离测算方法
function formatLength(line) {
    let length = 0
    if (geodesicCheckBox.checked) {
        // 经纬度测量，曲面面积
        const sourcePrj = map.getView().getProjection()
        length = ol.sphere.getLength(line,{'projection':sourcePrj,'radius':678137})
    } else {
        length = Math.round(line.getLength()*100)/100
    }
    let output = 0;
    if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位
    } else {
        output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位
    }
    return output;//返回线的长度
}
// 创建面积测算方法
function formatArea (polygon) {
    let area = 0;
    if (geodesicCheckBox.checked) {//若使用测地学方法测量
        const sourceProj = map.getView().getProjection();//地图数据源投影坐标系
        const geom = (polygon.clone().transform(sourceProj, 'EPSG:4326')); //将多边形要素坐标系投影为EPSG:4326
        area = Math.abs(ol.sphere.getArea(geom, { "projection": sourceProj, "radius": 6378137 })); //获取面积
    } else {
        area = polygon.getArea();//直接获取多边形的面积
    }
    let output = 0;
    if (area > 10000) {
        output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km2'; //换算成KM单位
    } else {
        output = (Math.round(area * 100) / 100) + ' ' + 'm2';//m为单位
    }
    return output; //返回多边形的面积
};

7. 监听鼠标移动事件

// 添加地图鼠标移动事件
const drawPolygonMsg = "Click to continue drawing the polygon"
const drawLineMsg = "Click to continue drawing the line"
// 鼠标移动事件处理函数
const pointerMoveHandler = evt=> {
    if (evt.dragging) {
        return
    }
    let helpMsg = "Click to start drawing" // 默认提示信息
    // 判断绘制的几何类型，设置对应信息提示框
    if (sketch) {
        const geom = sketch.getGeometry()
        if (geom instanceof ol.geom.Polygon) {
            helpMsg = drawPolygonMsg
        } else if (geom instanceof ol.geom.LineString) {
            helpMsg = drawLineMsg
        }
    }
    helpTooltipElement.innerHTML = helpMsg // 

    helpTooltip.setPosition(evt.coordinate)
    $(helpTooltipElement).removeClass('hidden') // 移除隐藏样式

}
map.on('pointermove', pointerMoveHandler) // 绑定鼠标移动事件，动态显示帮助信息提示框
$(map.getViewport()).on('mouseout', evt=> {
    $(helpTooltipElement).addClass('hidden')
})

8. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

             Geometry type                        Length             Area                               use geodesic measures              

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !