Openlayers实现测量功能

为了实现Openlayers中的测量功能，我们需要借助第三方库——Openlayers-Geometries measure，以下是实现步骤。

步骤一：下载并引入Openlayers-Geometries measure

可以通过以下两种方式引入Openlayers-Geometries measure库：

方式一：通过npm安装

在项目的根目录下执行以下命令：

npm i ol-geometries-measure

然后在代码中引入：

import { GeomType, GeomUtil } from 'ol-geometries-measure';

方式二：直接下载压缩包

在Openlayers-Geometries measure的GitHub页面中，可以下载压缩包并解压到项目的合适位置，然后在代码中引入：

import { GeomType, GeomUtil } from '/path/to/ol-geometries-measure.min.js';

步骤二：创建测量交互

通过实例化GeomUtil类可以创建测量交互：

const geomUtil = new GeomUtil(map);

其中，map是Openlayers地图实例。通过在地图上点击不同位置，可以实现测量线段、多边形等不同类型的测量。

// 创建一个测量线段的交互
const measureLine = geomUtil.createDraw(GeomType.LINE_STRING);

// 创建一个测量多边形的交互
const measurePolygon = geomUtil.createDraw(GeomType.POLYGON);

步骤三：显示测量结果

绑定drawend事件，获取绘制完成的geometry，然后调用getLength()或getArea()方法即可得到测量结果。

measureLine.on('drawend', function (event) {
  const length = event.feature.getGeometry().getLength();
  console.log(`线段长度：${length}米`);
});

measurePolygon.on('drawend', function (event) {
  const area = event.feature.getGeometry().getArea();
  console.log(`多边形面积：${area}平方米`);
});

示例一：测量两点之间的距离

const measureLine = geomUtil.createDraw(GeomType.LINE_STRING);
measureLine.on('drawend', function (event) {
  const length = event.feature.getGeometry().getLength();
  alert(`两点之间的距离为${length}米`);
});

在地图上点击两个点，绘制出线段，随即弹出测量结果。

示例二：测量选中范围的面积

const measurePolygon = geomUtil.createDraw(GeomType.POLYGON);
measurePolygon.on('drawend', function (event) {
  const area = event.feature.getGeometry().getArea()
  alert(`所选范围的面积为${area}平方米`);
});

在地图上选中一个区域，绘制出多边形，随即弹出测量结果。