使用自己的按钮在传单中隐藏/显示图层组 [英] Hide/Show layerGroups in Leaflet with own Buttons

问题描述

我有一张传单地图，上面有几个标记.我将这些标记放置在图层组"中，以便能够显示和隐藏标记类别. 这些是我的标记:

I have a leaflet map with several markers in it. I've put these markers in "Layer Groups" to be able to show and hide the marker-categories. These are my markers:

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

当我使用图层控制"和overlayMaps时，效果很好:

That works quite well when I use Layers Control and overlayMaps:

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

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

但是现在我希望能够使用我自己的按钮"(图标)来完成这项工作(隐藏并显示图层组).我的html:

But now I want to be able to make that work (hide and show the layer groups) with my own "buttons" (icons). My 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或类似的东西来实现，但是我只是不知道如何使它起作用(显示和隐藏餐厅，运动和景点层).因此，我想让我的图层在单击标题中的图标时可见，而在第二次单击时它们消失.非常感谢！

I guess it's possible with removeLayer or something like that but I just don't get it how to make it work (show and hide restaurants-, sport- and sights-layer). So, I want to acchieve it that my layers are visible when I click on the Icons in my header and that they disappear when I click a second time. Thanks so much!

推荐答案

首先，您需要为每个图层链接

First you need a link for each layer

<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为例)

Then, for each link you can write a handler like this (example with 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/

这篇关于使用自己的按钮在传单中隐藏/显示图层组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！