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

多边形编辑

拖动顶点改变面的形状,点击地图追加顶点,面积随编辑实时刷新。

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

说明

顶点用可拖拽的 divIcon 标记表示,拖动时把新坐标写回数组并调用 polygon.setLatLngs(pts),松手后再统一刷新统计。 数组是唯一数据源,多边形与顶点标记都从它派生,避免两者各自维护坐标。

面积按球面公式逐边积分,结果与 PostGIS 的 ST_Area(geography) 在千米级范围内基本一致。直接投影到平面再算会随纬度抬高而偏大,园区级数据看不出, 跨省范围就不能这么用。

操作实现边界情况
拖动顶点drag 事件中更新数组拖动中不重建标记,避免指针丢失
追加顶点地图 click 后 push需要先切换到加点模式,否则点击只关气泡
删除顶点点击顶点标记少于 3 个顶点时拒绝删除
面积球面积分公式自相交多边形结果没有意义
重置重建数组与标记同时 fitBounds 回到初始视野

顶点重建时先 clearLayers() 再逐个创建,能让标记数量与数组严格对齐, 但正在拖拽的标记会被销毁。若要做流畅的编辑体验,应增量维护标记, 只在拖拽结束后同步一次几何。