经纬志
首页 / OpenLayers / 使用示例

测量距离

沿着道路单击落点,鼠标旁的数字随移动实时变化,双击结束并给出总长度。 长度用球面公式计算,不受墨卡托投影在高纬度放大的影响。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

实时数字用一个 ol.Overlay 实现:在 drawstart 时监听 pointermove,把当前鼠标坐标追加到几何体的副本上再算长度。 用副本是为了不改动正在绘制的要素,否则每移动一次就会真的多出一个顶点。

阶段处理
drawstart注册 pointermove 监听,显示提示框
移动中复制几何体、追加坐标、调 ol.sphere.getLength
drawend注销监听、隐藏提示框、写入总长度
drawabort按 Esc 取消时同样要注销监听

ol.sphere.getLength 返回米。示例按 1000 米为界在“米”和“公里”之间切换单位, 这样短距离测量不会显示成 0.00 公里。

提示框的定位交给 ol.Overlay 的 positioning: 'bottom-center' 与 offset 参数, 不要在 CSS 里再叠一层 translate,否则偏移会翻倍。