Openlayers实现长度测量的方法

 更新时间:2024年11月07日 11:28:40   作者: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)方法获取的,参数是几何对象。

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

总结

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

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

相关文章

  • es6函数之严格模式用法实例分析

    es6函数之严格模式用法实例分析

    这篇文章主要介绍了es6函数之严格模式用法,结合实例形式分析了es6函数严格模式的定义、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • html+js实现动态显示本地时间

    html+js实现动态显示本地时间

    显示本地时间的方法有很多,在本文将为大家介绍下如何使用html+js实现动态显示本地时间,感兴趣的朋友可以了解下
    2013-09-09
  • JS中循环字符串拼接时加换行问题

    JS中循环字符串拼接时加换行问题

    这篇文章主要介绍了JS中循环字符串拼接时加换行问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • js计时事件实现圆形时钟

    js计时事件实现圆形时钟

    这篇文章主要为大家详细介绍了js计时事件实现圆形时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 小程序实现上下切换位置

    小程序实现上下切换位置

    这篇文章主要为大家详细介绍了小程序实现上下切换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript使用正则获取url上的某个参数

    javascript使用正则获取url上的某个参数

    使用indexOf取得?之后的参数,以&使split进行分割成数组,下面展示了一个从url上获取名为MenuCode参数的过程
    2014-09-09
  • JavaScript 变量、作用域及内存

    JavaScript 变量、作用域及内存

    这篇文章主要介绍了JavaScript 变量、作用域及内存,需要的朋友可以参考下
    2015-04-04
  • 浅析JS中回调函数的使用

    浅析JS中回调函数的使用

    在JavaScript中,回调函数是一种常见的编程模式,用于处理异步操作和事件处理,这篇文章主要为大家介绍了回调函数的使用场景和注意事项,需要的可以参考下
    2023-08-08
  • javascript实现随机读取数组的方法

    javascript实现随机读取数组的方法

    这篇文章主要介绍了javascript实现随机读取数组的方法,涉及javascript随机数及针对数组操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript使用Promise封装Axios进行高效开发

    JavaScript使用Promise封装Axios进行高效开发

    这篇文章主要介绍了JavaScript使用Promise封装Axios进行高效开发,Axios是一个基于Promise的HTTP库,它可以帮助我们更方便地发起HTTP请求,并且提供了许多高级功能,感兴趣的同学可以参考下文
    2023-05-05

最新评论