首页 / OpenLayers / 使用示例
测量距离
沿着道路单击落点,鼠标旁的数字随移动实时变化,双击结束并给出总长度。 长度用球面公式计算,不受墨卡托投影在高纬度放大的影响。
源码与运行效果
说明
实时数字用一个 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,否则偏移会翻倍。