经纬志
首页 / Leaflet / API 文档

Rectangle

先看结论

由一对对角点确定的矩形面要素,继承自 Polygon。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-28 · 引用本文
L.rectangle(bounds, options) → Rectangle

参数

参数类型说明
boundsLatLngBounds矩形范围,[[南, 西], [北, 东]] 或 L.latLngBounds(a, b)
optionsPath options描边、填充与交互选项,见下表

选项

选项默认值说明
stroketrue是否绘制边线
color'#3388ff'边线颜色
weight3边线宽度,像素
opacity1边线不透明度
lineCap'round'线端样式:'butt' / 'round' / 'square'
lineJoin'round'拐角样式:'miter' / 'round' / 'bevel'
dashArraynull虚线样式,如 '6 4'
dashOffsetnull虚线起始偏移
filltrue是否填充
fillColornull填充色,未设置时沿用 color
fillOpacity0.2填充不透明度
fillRule'evenodd'填充规则:'evenodd' / 'nonzero'
interactivetrue是否响应鼠标事件
bubblingMouseEventstrue图层事件是否冒泡到地图
classNamenull附加到容器的 class(仅 SVG 渲染器有效)

成员

成员返回值说明
setBounds(bounds)this重新设定范围,内部重建四个角点
getBounds()LatLngBounds当前范围,可用于 map.fitBounds
setStyle(style)this就地更新样式,不重建图层
getLatLngs()LatLng[][]四个角点,继承自 Polygon
toGeoJSON()Object输出 Polygon 要素,不是 BBOX
bringToFront() / bringToBack()this调整同 pane 内的绘制顺序
addTo(map) / remove()this挂载与销毁
var bounds = [[39.890, 116.370], [39.925, 116.425]];

var rect = L.rectangle(bounds, {
  color: '#c2410c',
  weight: 2,
  fillColor: '#f97316',
  fillOpacity: 0.12,
  dashArray: '6 4'
}).addTo(map);

rect.bindTooltip('覆盖范围 4.2 km²', { direction: 'top' });

map.on('click', function (e) {
  rect.setBounds([e.latlng, L.latLng(e.latlng.lat + 0.01, e.latlng.lng + 0.012)]);
});

Rectangle 只是 Polygon 的语法糖。它没有 width / height 概念, 四个角点由 bounds 的西南、东北角推出。因此不能单独设置长宽, 也不支持旋转,需要旋转矩形时用 L.polygon 手算四个角点。

范围跨越 180° 经线时(西经为正、东经为负的写法),矩形会被解释成横跨整个地球的一条带。 数据入库前先把经度统一到 −180~180,或者拆成两个矩形。

引用本文

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