首页 / Leaflet / API 文档
Rectangle
先看结论
由一对对角点确定的矩形面要素,继承自 Polygon。
L.rectangle(bounds, options) → Rectangle
参数
| 参数 | 类型 | 说明 |
|---|---|---|
bounds | LatLngBounds | 矩形范围,[[南, 西], [北, 东]] 或 L.latLngBounds(a, b) |
options | Path options | 描边、填充与交互选项,见下表 |
选项
| 选项 | 默认值 | 说明 |
|---|---|---|
stroke | true | 是否绘制边线 |
color | '#3388ff' | 边线颜色 |
weight | 3 | 边线宽度,像素 |
opacity | 1 | 边线不透明度 |
lineCap | 'round' | 线端样式:'butt' / 'round' / 'square' |
lineJoin | 'round' | 拐角样式:'miter' / 'round' / 'bevel' |
dashArray | null | 虚线样式,如 '6 4' |
dashOffset | null | 虚线起始偏移 |
fill | true | 是否填充 |
fillColor | null | 填充色,未设置时沿用 color |
fillOpacity | 0.2 | 填充不透明度 |
fillRule | 'evenodd' | 填充规则:'evenodd' / 'nonzero' |
interactive | true | 是否响应鼠标事件 |
bubblingMouseEvents | true | 图层事件是否冒泡到地图 |
className | null | 附加到容器的 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)。