首页 / Leaflet / API 文档
Circle
先看结论
地理意义上的圆:半径以米为单位,随缩放变化,范围分析常用。
L.circle(latlng, radius, options) → Circle
半径也可以写在 options 里:L.circle(latlng, { radius: 500 })。两个重载等价。
构造参数
| 参数 | 默认 | 说明 |
|---|---|---|
radius | — | 必填,单位米 |
color | '#3388ff' | 描边颜色 |
weight | 3 | 描边宽度(像素) |
opacity | 1 | 描边透明度 |
fill | 依赖 fillOpacity | 是否填充 |
fillColor | 同 color | 填充色 |
fillOpacity | 0.2 | 填充透明度 |
dashArray | null | 虚线样式,如 '6 6' |
lineCap / lineJoin | 'round' | 线端与拐角样式 |
interactive | true | 是否响应鼠标 |
renderer | SVG | 指定的渲染器实例 |
pane | 'overlayPane' | 渲染 pane |
className | '' | 附加类名,用于 CSS 动画 |
方法
| 方法 | 说明 |
|---|---|
setRadius(radius) | 修改半径,立即重绘 |
getRadius() | 读取半径(米) |
setLatLng(latlng) | 移动圆心 |
getLatLng() | 读取圆心 |
getBounds() | 外接矩形,用于 fitBounds |
setStyle(options) | 修改描边填充 |
bringToFront() / bringToBack() | 调整堆叠 |
toGeoJSON(precision?) | 导出为近似多边形 |
redraw() | 强制重新计算屏幕投影 |
var circle = L.circle([39.907359, 116.391263], {
radius: 1500,
color: '#1f5fd0',
weight: 1.5,
fillColor: '#1f5fd0',
fillOpacity: 0.12
}).addTo(map);
circle.bindTooltip('半径 1.5 km');
circle.setRadius(3000);
circle.setLatLng([39.914, 116.404]);
半径单位是米,不是像素。缩放地图时圆的屏幕尺寸会变化,地理范围不变。
如果希望标记始终是固定像素大小,用 L.circleMarker,它的 radius 单位是像素。
与 CircleMarker 的区别
| 对比项 | Circle | CircleMarker |
|---|---|---|
| 半径单位 | 米 | 像素 |
| 缩放行为 | 随地图缩放改变屏幕大小 | 屏幕大小恒定 |
| 适用场景 | 缓冲区、影响范围、覆盖面积 | 数据点符号 |
| 渲染开销 | 每次缩放重新计算路径 | 只平移位置 |
圆形是近似多边形
Leaflet 用一组线段逼近圆,缩放级别越高,分段越密。导出为 GeoJSON 时得到的是多边形顶点, 不是真正的圆。需要精确缓冲区时应在服务端用空间数据库生成,再作为 GeoJSON 加载。
量算提示
getBounds() 得到的是外接矩形,不是圆的面积。
圆面积直接用 Math.PI * radius * radius 计算;
需要球面精确值时按椭球体公式处理,Leaflet 的圆本身建立在球面近似之上。
经纬志(2026)。《Circle》。https://www.jingweizhi.com/leaflet/api/circle.html(访问日期 2026-11-03)。