使用自己的按钮在Leaflet中隐藏/显示图层组

Question

我有一张叶片地图，在地图上标了几个标记。我将这些标记放在“图层组”中，以便能够显示和隐藏标记类别。 以下是我的标记：

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]);

当我使用图层控制和叠加图层时效果非常好：

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或类似的方法可能是可行的，但我不知道如何使其工作（显示和隐藏餐馆、体育和景点图层）。因此，我希望当我点击标题中的图标时我的图层可见，并且再次点击它们会消失。非常感谢！

- user3671746

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

- YaFred

---

谢谢，这正是我想要实现的 :) 比我想象中容易！ - user3671746

Answer 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提供的解决方案也可以正常工作。

- willedanielsson