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

圆形绘制

点两次画出米制半径的圆,移动鼠标时实时显示半径,落定后标注面积。

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

说明

半径用 center.distanceTo(cursor) 计算,单位是米,直接喂给 L.circle 的 radius。这与 L.circleMarker 完全不同:后者的半径是像素,缩放时圆形大小不变。

第一次点击创建虚线预览圆与圆心标记,第二次点击才落定并把线型改为实线。 半径小于 20 米的误点直接丢弃,避免留下一个点不出来的圆。 Esc 可随时取消当前绘制。

阶段触发处理
定圆心第一次 click创建 L.circle 预览,记下圆心
调半径mousemovesetRadius(distanceTo),更新读数
落定第二次 click改实线、绑常驻标注、加入图层组
取消Esc移除预览圆并复位状态
清理清空按钮clearLayers() 一并清掉圆心标记

圆在地图上用多边形逼近绘制,放大到高等级时边缘能看出折线。 需要严格圆形的图形(例如缓冲区成果出图),应提高 smoothFactor 或在服务端生成几何后按多边形加载。