javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Openlayers长度测量

Openlayers实现长度测量的方法

作者:Jinuss

在Openlayers中,使用ol/sphere模块的getDistance函数可以计算两点间的大圆距离,绘制线路时,通过监听绘制事件和几何对象的变化,可实时更新距离,同时getLength函数帮助获取整条线路的长度,这些功能主要用于地理信息系统中的距离测量和地图制作

概述

在 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)方法获取的,参数是几何对象。

总结

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

到此这篇关于Openlayers实现长度测量的文章就介绍到这了,更多相关Openlayers长度测量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文