首页 / Leaflet / 使用示例
要素编辑
拖动标记修改位置,用侧栏表单改名称与类别,最后把整组要素导出成 GeoJSON。
源码与运行效果
说明
每个标记自身挂一个 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) | 只导出子图层,无法还原自定义属性 |
生产环境的要素编辑还要处理撤销、冲突与保存接口。坐标改动建议先在本地累积, 用户点「提交」再一次性发请求,否则每拖一次就写入,服务端会出现大量中间态。