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

拖动 GeoJSON 点

不是 DOM 标记,而是源里的一个点要素。按住圆点拖动时改写坐标并 setData,底图保持不动。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

按下时调用 dragPan.disable(),否则拖点会变成拖地图。mousemove 里用事件经纬度改要素坐标,setData 触发重绘。

松开时恢复 dragPan。判断「是否在拖」用一个布尔量,避免 mousemove 每次都做图层查询。

配置取值说明
mousedown 图层事件命中圆点开始拖动
dragPan.disable()方法关闭平移
setData每帧调用更新源坐标

每帧 setData 只适合单点或少量要素。多点同时拖动应改用 feature-state 加坐标表达式,避免整份数据重传。