传单：如何同时关闭或打开所有图层？

Question

目前，我有我的控件集，因此用户可以切换他们想要查看的每个图层。但是，我不确定如何在我的 UI 中构建“所有图层关闭”和“所有图层开启”功能。我有超过 70 层，它可能会变得凌乱，因此为什么需要一个“主”开关。

演示小提琴在这里

我有一个 geojson 对象，我正在过滤它以在我的地图上显示标记，如下所示：

var myData = [{...}];

var airport = L.geoJson(myData, {
filter: function(feature) {
    switch (feature.properties.Subcategory) {
        case 'Airport': return true;
            break;
    }
},
 onEachFeature: onEachFeature
});

var heliport = L.geoJson(myData, {
  filter: function(feature) {
    switch (feature.properties.Subcategory) {
        case 'Heliport': return true;
            break;
    }
},
 onEachFeature: onEachFeature
});

...
...
...
and so on...

我想在地图页面的右上角放置一个按钮控件，如下所示：

<div id="toggle" style="display:none;">
Toggle all layers:
<button type="button" class="btn btn-link"     onClick="removeAllLayers()">OFF</button>
<button type="button" class="btn btn-link" onClick="addAllLayers()">ON</button>
</div>

并将该控件添加到地图中，如下所示：

map.legendControl.addLegend(document.getElementById('toggle').innerHTML).setPosition('topright');

并将所有图层分配给一个 layerGroup，如下所示：

var showAllLayers = L.layerGroup(myData);
var removeAllLayers = L.layerGroup(myData);

并构建一个像这样的函数（只显示了 removeAllLayers 示例）：

function removeAllLayers() {
    removeAllLayers.clearLayers();
};

当然，这行不通。有人可以告诉我如何解决这个问题，或者您对如何解决这个问题有更好的想法吗？谢谢你！

Answer 1

添加/删除所有覆盖的最简单方法是迭代(and )_layers使用的对象，检查它是否是覆盖并将它们添加到实例或从实例中删除它们。您可以轻松地将两个新方法包含到控件中以添加该逻辑。例如：L.Control.LayersL.Control.GroupedLayers_map

L.Control.GroupedLayers.include({
    addOverlays: function () {
        for (var i in this._layers) {
            if (this._layers[i].overlay) {
                if (!this._map.hasLayer(this._layers[i].layer)) {
                    this._map.addLayer(this._layers[i].layer);
                }
            }
        }
    },
    removeOverlays: function () {
        for (var i in this._layers) {
            if (this._layers[i].overlay) {
                if (this._map.hasLayer(this._layers[i].layer)) {
                    this._map.removeLayer(this._layers[i].layer);
                }
            }
        }
    }
});

Plunker 上的概念示例：http://plnkr.co/edit/AvV55Pph7hkectadZSTb ?p=preview