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

绘制多边形

点击落点、双击闭合、拖动顶点改形,面积按球面公式实时计算,全程只用 Leaflet 核心 API。

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

说明

绘制器维护一个当前形状对象,包含顶点数组、顶点标记和面图层。 每次点击追加顶点并刷新几何;顶点标记可拖拽,drag 事件里同步更新数组, 线和面积跟着手指变化。已完成的形状保留顶点,仍然可以继续微调。

操作结果
点击地图追加一个顶点,面积随之更新
双击去掉重复末端点并闭合,顶点至少 3 个才生效
拖动顶点实时改形,重新计算面积
撤销顶点删除最后一个顶点及其标记
清空移除所有面与顶点,复位状态

双击会先触发两次 click,导致末端出现重复顶点,示例在 dblclick 里比较最后两点的距离,小于 1 米就删掉一个。地图必须设 doubleClickZoom: false, 否则每次闭合都会放大一级。

多边形图层设 interactive: false,点击面时事件会落到地图上, 绘制过程中不会因为点在面内部而中断。需要吸附、切割、撤销栈时再考虑专业绘图插件。