经纬志
首页 / Leaflet / API 文档

LayerGroup

先看结论

把多个图层打包成一个整体,统一增删、统一控制显示。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-27 · 引用本文
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,多了三件事:

能力LayerGroupFeatureGroup
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)。