概述

在 Openlayers 中，计算两点之间的距离，通常会用到ol/sphere模块。ol/sphere模块主要用于处理与球体（特别是地球球体）相关的数学和几何计算。而长度测量主要用到ol/sphere中的getDistance函数。

getDistance函数用于计算地球表面两点之间的距离，通常用于经纬度坐标。计算的是球面上两点之间的大圆距离（即通过球体表面两个点的最短路径距离）。其返回值的单位是米 (m)

实践

效果展示

绘制

结果

实现思路

绘制曲线可以采用 Openlayers 中的ol/interaction模块的Draw类

• 实例化 Draw

this.draw = new Draw({
  source: this.vectorLayer?.getSource(),
  type: "LineString",
  style: this.lineStyle,
});

this.map.addInteraction(this.draw);

• 监听 this.draw 的 drawstart 方法

this.draw.on("drawstart", this.handleMeasureLineStart.bind(this));

在handleMeasureLineStart回调方法中，接受一个evt对象，该对象包含绘制的feature以及坐标coordinate。效果图一中，在选择第一个点后，拖动鼠标，会实时显示当前鼠标表示的点与起点之间的距离，这个逻辑就是在该回调中实现的。

• 监听绘制的 feature 的 change 事件

this.listenGeometryChange = feature.getGeometry().on("change", (evt) => {
  /*..处理逻辑..*/
});

通过evt.target获取当前几何对象geometry，通过该几何对象的getFirstCoordinate()方法获取第一个点标记为起点，getLastCoordinate()方法获取最后一个点标记为终点。而绘制路线的转折点可以通过几何对象的getCoordinates()方法获取，这个方法包含首尾两端的点。

• 计算坐标距离

最前面提到通过ol/sphere的getDistance()方法计算两点之间的距离，而在上一步中可以得到所有折线段的坐标，循环调用getDistance方法，（需要注意的是如果当前坐标系不是经纬度的话，就需要转换）。就可以得到每段折线的距离。相加就是总长。但实际上例子中的总长是调用sphere.getLength(geometry)方法获取的，参数是几何对象。

• sphere.getLength()方法是用于计算球体表面上沿大圆弧的距离。其参数可以是ol/geom/LineString | ol/geom/Polygon | ol/geom/MultiLineString | ol/geom/MultiPolygon的实例。
• geometry 是一个表示线（如 LineString）或面（如 Polygon）的几何对象。该几何对象可以是包含多个点的路径，或者是一个闭合的面。
• 对于一个 LineString（线），getLength 计算的是从第一个点到最后一个点之间的球面大圆距离。
• 对于 Polygon（面），getLength 计算的是边界线的球面长度。如果是多边形，则计算其外环的长度。

总结

Openlayers 中提供了内置模块ol/sphere用于计算距离，绘制几何对象时，可以通过监听获取当前几何对象的关键值。