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

要素编辑

拖动标记修改位置,用侧栏表单改名称与类别,最后把整组要素导出成 GeoJSON。

Leaflet 1.9.4 · 更新 2026-10-28
源码与运行效果
运行效果

说明

每个标记自身挂一个 properties 对象,颜色由类别字段映射, 改类别即重建 divIcon。位置编辑交给 draggable: true, 在 dragend 里读取 getLatLng() 即可拿到新坐标, Leaflet 不需要额外的编辑插件。

导出调用 featureGroup.toGeoJSON(6),精度参数对应小数点位数。 标记的 properties 不会自动写进 GeoJSON,示例在导出前把 properties 字段补回 feature,真实项目里应在 创建要素时就维护好一份符合规范的 Feature 对象。

操作用到的接口注意
移动位置draggable + dragend拖拽结束后才读坐标,drag 过程中坐标已变但瓦片未更新
选中高亮setIcon重建图标会丢失悬停状态,动画应放在 CSS 类里
改名称setTooltipContent气泡内容用 setPopupContent
删除featureGroup.removeLayer同时把选中引用置空,否则表单操作到已移除的对象
导出toGeoJSON(6)只导出子图层,无法还原自定义属性

生产环境的要素编辑还要处理撤销、冲突与保存接口。坐标改动建议先在本地累积, 用户点「提交」再一次性发请求,否则每拖一次就写入,服务端会出现大量中间态。