传单:如何打开或关闭所有图层? [英] Leaflet: How to toggle ALL layers either off or on at once?

问题描述

当前，我已经设置了控件，以便用户可以切换要查看的每个图层.但是，我不确定如何在我的UI中构建关闭所有图层"和打开所有图层"功能.我的图层超过70层，可能会变得凌乱，因此为什么需要主"开关?

演示 在此处进行修饰

我有一个要过滤以显示标记的geojson对象 在我的地图上是这样的:

I have a single geojson object that I am filtering to display markers on my map like so:

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...

我当时想在地图页面的右上方放置一个按钮控件，例如 所以:

I was thinking of putting a button control at top right of the map page like so:

<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>

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

and add that control to the map like so:

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

，然后将所有图层分配给layerGroup，如下所示:

and assign all layers to a layerGroup like so:

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

并构建一个类似的功能(仅显示removeAllLayers示例):

and build a function like so (only removeAllLayers example is shown):

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

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

Of course, this doesn't work. Can someone show me the way to get this figured out or do you have any better ideas on how to approach this? THANK YOU!

推荐答案

添加/删除所有叠加层的最简单方法是迭代L.Control.Layers(和L.Control.GroupedLayers)使用的_layers对象，检查是否一个叠加层，并将其添加到_map实例中/从中删除.您可以轻松地在控件中包括两个新方法以添加该逻辑.例如:

The easiest way to add/remove all the overlays is by iterating the _layers object used by L.Control.Layers (and L.Control.GroupedLayers), check if it's an overlay and add/removing them to/from the _map instance. You can easily include two new methods into the control to add that logic. For example:

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 =预览

Example of the concept on Plunker: http://plnkr.co/edit/AvV55Pph7hkectadZSTb?p=preview

这篇关于传单:如何打开或关闭所有图层?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！