`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

图标位置修改

用修改交互拖动图标,松手后读出新的经纬度并按朝向旋转图标。

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

说明

ol.interaction.Modify 对点要素同样有效:拖动图标即移动坐标, modifyend 后读取几何并转成经纬度。图标本身通过 ol.style.Icon 的 rotation 控制朝向。

pixelTolerance 调大可让手指更容易抓住图标; 示例额外提供旋转按钮,验证旋转与位置互不影响。

操作结果
拖动图标坐标实时移动,松手后经纬度更新
点「旋转 90°」图标绕锚点转动,坐标不变
放大容差后拖动不必精确压在图钉上也能移动

图标旋转以 anchor 为圆心,锚点若设成 [0.5, 1],旋转时视觉中心会偏离图钉尖。

`r`n
`r`n