首页 / Leaflet / 使用示例
多边形编辑
拖动顶点改变面的形状,点击地图追加顶点,面积随编辑实时刷新。
源码与运行效果
说明
顶点用可拖拽的 divIcon 标记表示,拖动时把新坐标写回数组并调用
polygon.setLatLngs(pts),松手后再统一刷新统计。
数组是唯一数据源,多边形与顶点标记都从它派生,避免两者各自维护坐标。
面积按球面公式逐边积分,结果与 PostGIS 的 ST_Area(geography)
在千米级范围内基本一致。直接投影到平面再算会随纬度抬高而偏大,园区级数据看不出,
跨省范围就不能这么用。
| 操作 | 实现 | 边界情况 |
|---|---|---|
| 拖动顶点 | drag 事件中更新数组 | 拖动中不重建标记,避免指针丢失 |
| 追加顶点 | 地图 click 后 push | 需要先切换到加点模式,否则点击只关气泡 |
| 删除顶点 | 点击顶点标记 | 少于 3 个顶点时拒绝删除 |
| 面积 | 球面积分公式 | 自相交多边形结果没有意义 |
| 重置 | 重建数组与标记 | 同时 fitBounds 回到初始视野 |
顶点重建时先 clearLayers() 再逐个创建,能让标记数量与数组严格对齐,
但正在拖拽的标记会被销毁。若要做流畅的编辑体验,应增量维护标记,
只在拖拽结束后同步一次几何。