经纬志
首页 / Leaflet / API 文档

Circle

先看结论

地理意义上的圆:半径以米为单位,随缩放变化,范围分析常用。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-27 · 引用本文
L.circle(latlng, radius, options) → Circle

半径也可以写在 options 里:L.circle(latlng, { radius: 500 })。两个重载等价。

构造参数

参数默认说明
radius—必填,单位米
color'#3388ff'描边颜色
weight3描边宽度(像素)
opacity1描边透明度
fill依赖 fillOpacity是否填充
fillColor同 color填充色
fillOpacity0.2填充透明度
dashArraynull虚线样式,如 '6 6'
lineCap / lineJoin'round'线端与拐角样式
interactivetrue是否响应鼠标
rendererSVG指定的渲染器实例
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 的区别

对比项CircleCircleMarker
半径单位米像素
缩放行为随地图缩放改变屏幕大小屏幕大小恒定
适用场景缓冲区、影响范围、覆盖面积数据点符号
渲染开销每次缩放重新计算路径只平移位置

圆形是近似多边形

Leaflet 用一组线段逼近圆,缩放级别越高,分段越密。导出为 GeoJSON 时得到的是多边形顶点, 不是真正的圆。需要精确缓冲区时应在服务端用空间数据库生成,再作为 GeoJSON 加载。

量算提示

getBounds() 得到的是外接矩形,不是圆的面积。 圆面积直接用 Math.PI * radius * radius 计算; 需要球面精确值时按椭球体公式处理,Leaflet 的圆本身建立在球面近似之上。

引用本文

经纬志(2026)。《Circle》。https://www.jingweizhi.com/leaflet/api/circle.html(访问日期 2026-11-03)。