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

自定义交互

用 ol.interaction.Pointer 的三个回调实现「按住标记拖动」:按下时选中要素,拖动时改坐标,松开时结束。

OpenLayers 10.3.1 · 对应官方 custom-interactions.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

ol.interaction.Pointer 把指针事件拆成三个钩子: handleDownEvent 返回 true 表示这次按下由本交互接管; handleDragEvent 在拖动过程中持续调用; handleUpEvent 负责收尾。

按下时用 map.forEachFeatureAtPixel() 找命中的要素并记下来, 拖动时直接把 evt.coordinate 写回点的几何。默认的 DragPan 仍在地图上, 因此拖空白处是平移,拖标记是移动要素。

操作结果
按住标记拖动要素跟随指针移动
松开鼠标状态栏输出新的经纬度
拖拽空白区域地图平移,不改变任何要素

需要独占手势时,给自定义交互加 condition 或调高它的优先级,避免与 DragPan 同时生效。