如何在Leaflet中将三个GeoJSON图层合并为单个图层控制按钮

要实现用一个开关统一控制三个GeoJSON图层的显示/隐藏，只需用Leaflet的L.layerGroup()把三个图层打包成一个组，再将这个组添加到图层控件即可，具体修改如下：

修改后的完整代码 #

JavaScript部分 #

// 创建三个GeoJSON图层，暂不单独添加到地图
var footpaths = L.geoJSON(footpaths, {
    color: 'black',
    fillColor: 'white',
    weight: 0.5,
    fillOpacity: 0.9
});

var gardens = L.geoJSON(gardens, {
    color: 'black',
    fillColor: 'green',
    weight: 0.5,
    fillOpacity: 0.9
});

var OldBuildings = L.geoJSON(OldBuildings, {
    color: 'black',
    fillColor: 'grey',
    weight: 0.5,
    fillOpacity: 0.8
});

// 将三个图层合并为一个图层组，.addTo(map)表示默认显示该组
var mapFeaturesGroup = L.layerGroup([OldBuildings, footpaths, gardens]).addTo(map);

// 配置叠加图层，仅保留这个合并后的组
var overlays = {
    "建筑、步道与花园": mapFeaturesGroup // 可自定义控件中显示的名称
};

L.control.layers(baseLayers, overlays).addTo(map);

HTML引入部分（无需修改） #

<script src="OldBuildings.js"></script>
<script src="footpaths.js"></script>
<script src="gardens.js"></script>

关键修改说明 #

• 移除了每个GeoJSON图层后的.addTo(map)，改为通过图层组统一控制是否添加到地图。
• L.layerGroup()会将传入的所有图层打包成一个逻辑组，图层控件中只会显示一个切换项，勾选/取消时会同步控制所有子图层的显示状态。
• 若不需要默认显示这个组，只需去掉图层组后的.addTo(map)即可。

内容的提问来源于stack exchange，提问作者Tim Stoker