使用自己的按钮在 Leaflet 中隐藏/显示 layerGroups答案

【问题标题】：Hide/Show layerGroups in Leaflet with own Buttons使用自己的按钮在 Leaflet 中隐藏/显示 layerGroups
【发布时间】：2014-07-09 16:03:35
【问题描述】：

我有一张传单地图，里面有几个标记。我已将这些标记放在“图层组”中，以便能够显示和隐藏标记类别。这些是我的标记：

var aa = L.marker([48.185556, 11.620278]).bindPopup('AA'),
bb = L.marker([48.152222, 11.592778]).bindPopup('BB'),
cc = L.marker([48.161209, 11.597989]).bindPopup('CC'),
dd = L.marker([48.14350, 11.58775]).bindPopup('DD'),
ee = L.marker([48.14989, 11.59094]).bindPopup('EE'),
ff = L.marker([48.15958, 11.60608]).bindPopup('FF');

var restaurants = L.layerGroup([aa, bb]);
var sport = L.layerGroup([cc, dd]);
var sights = L.layerGroup([ee, ff]);

当我使用 Layers Control 和 overlayMaps 时效果很好：

var overlayMaps = {
"Restaurants": restaurants,
"Sport": sport,
"Sights": sights
};

L.control.layers(overlayMaps).addTo(map);

但现在我希望能够使用我自己的“按钮”（图标）来完成这项工作（隐藏和显示图层组）。我的html：

    <div class="header">
            <a href="#">
            <span class="fontawesome-food"></span>
            <span class="fontawesome-heart-empty"></span>
            <span class="fontawesome-eye-open"></span>
            </a>
    </div>

我想使用 removeLayer 或类似的东西是可能的，但我只是不明白如何使它工作（显示和隐藏餐厅、运动和景点层）。因此，我希望在单击标题中的图标时可以看到我的图层，并且当我第二次单击时它们会消失。非常感谢！

【问题讨论】：

标签： jquery leaflet

【解决方案1】：

首先你需要每个层的链接

<ul>
    <li><a id="restaurants" href="#">restaurants</a></li>
    <li><a id="sport" href="#">sport</a></li>
    <li><a id="sights" href="#">sights</a></li>
</ul>

然后，对于每个链接，您可以编写这样的处理程序（以 jQuery 为例）

$("#restaurants").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(restaurants)) {
        $(this).removeClass('selected');
        map.removeLayer(restaurants);
    } else {
        map.addLayer(restaurants);        
        $(this).addClass('selected');
   }
});

这里有一个例子http://jsfiddle.net/FranceImage/c5Yfb/

【讨论】：

谢谢，这正是我想要实现的目标 :) 比我想象的要容易！

【解决方案2】：

首先，您需要三个按钮（餐厅、体育和景点）的类名。然后在 JavaScript 中添加： `

    <script>
        var restaurants = document.getElementsByClassName("restaurants");
        var sports = document.getElementsByClassName("sports");
        var sights = document.getElementsByClassName("sights");

        restaurants.onclick = function(e){

            // setFilter takes a feature object and returns 
               true to show it and false to hide
            map.featureLayer.setFilter(function(f) {
                return f.properties['marker-symbol'] === 'restaurants';
            });
            return false;
        };

这是您想要使用的setFilter-函数，这是一个很好的例子Mpabox - Filtering Markers。

@FranceImage 的解决方案也应该可以正常工作。

【讨论】：