首页 / Leaflet / API 文档
LayerGroup
先看结论
把多个图层打包成一个整体,统一增删、统一控制显示。
L.layerGroup(layers?, options?) → LayerGroup
构造参数
| 参数 | 默认 | 说明 |
|---|---|---|
layers | [] | 初始图层数组,也可后续 addLayer |
pane | 'overlayPane' | 渲染到哪个 pane |
attribution | — | 整组共用的版权文字 |
方法
| 方法 | 说明 |
|---|---|
addLayer(layer) | 加入一个图层;已在组内时忽略 |
removeLayer(layer) | 移除指定图层 |
clearLayers() | 清空全部图层 |
hasLayer(layer) | 判断是否包含 |
eachLayer(fn, context?) | 遍历,可提前 return false 中断 |
getLayers() | 返回图层数组的副本 |
getLayerId(layer) | 取内部分配的字符串 id |
setZIndex(n) | 设置整组层级 |
addTo(map) / remove() | 整组加入或移出地图 |
事件
| 事件 | 触发时机 | e.layer |
|---|---|---|
layeradd | 组内新增图层 | 新增的图层 |
layerremove | 组内移除图层 | 被移除的图层 |
var group = L.layerGroup().addTo(map);
function addPoint(latlng, color) {
var dot = L.divIcon({
className: '',
html: '<i class="dot" style="background:' + color + '"></i>',
iconSize: [12, 12],
iconAnchor: [6, 6]
});
group.addLayer(L.marker(latlng, { icon: dot }));
}
addPoint([39.907359, 116.391263], '#1f5fd0');
group.on('layeradd', function (e) {
console.log('当前图层数', group.getLayers().length);
});
group.clearLayers();
clearLayers() 比逐个 removeLayer 快,也不会漏。
但注意:如果显示状态由外部面板控制,清空后需要同步面板的勾选。
与 FeatureGroup 的区别
L.featureGroup 继承自 LayerGroup,多了三件事:
| 能力 | LayerGroup | FeatureGroup |
|---|---|---|
bindPopup / bindTooltip 作用于整组 | 不支持 | 支持 |
| 子图层事件可被组转发 | 不转发 | 转发 click 等鼠标事件 |
toGeoJSON() | 无 | 有 |
setStyle(fn) | 无 | 有,递归应用到矢量图层 |
需要导出数据、统一弹窗、或者整组响应点击时用 FeatureGroup;
只是做显隐管理,LayerGroup 更轻。
图层顺序
组内图层按加入顺序堆叠,后加的在上面。矢量图层之间还受 zIndex 与 pane 影响,
想让某个要素始终置顶,用 bringToFront(),不要依赖添加顺序。
经纬志(2026)。《LayerGroup》。https://www.jingweizhi.com/leaflet/api/layer-group.html(访问日期 2026-11-03)。