首页 / Leaflet / 使用示例
圆形绘制
点两次画出米制半径的圆,移动鼠标时实时显示半径,落定后标注面积。
源码与运行效果
说明
半径用 center.distanceTo(cursor) 计算,单位是米,直接喂给
L.circle 的 radius。这与 L.circleMarker
完全不同:后者的半径是像素,缩放时圆形大小不变。
第一次点击创建虚线预览圆与圆心标记,第二次点击才落定并把线型改为实线。 半径小于 20 米的误点直接丢弃,避免留下一个点不出来的圆。 Esc 可随时取消当前绘制。
| 阶段 | 触发 | 处理 |
|---|---|---|
| 定圆心 | 第一次 click | 创建 L.circle 预览,记下圆心 |
| 调半径 | mousemove | setRadius(distanceTo),更新读数 |
| 落定 | 第二次 click | 改实线、绑常驻标注、加入图层组 |
| 取消 | Esc | 移除预览圆并复位状态 |
| 清理 | 清空按钮 | clearLayers() 一并清掉圆心标记 |
圆在地图上用多边形逼近绘制,放大到高等级时边缘能看出折线。
需要严格圆形的图形(例如缓冲区成果出图),应提高 smoothFactor
或在服务端生成几何后按多边形加载。