jQuery 使用自己的按钮隐藏/显示传单中的图层组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24658596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide/Show layerGroups in Leaflet with own Buttons
提问by user3671746
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]);
That works quite well when I use Layers Control and overlayMaps:
当我使用 Layers Control 和 overlayMaps 时，效果很好：
var overlayMaps = {
"Restaurants": restaurants,
"Sport": sport,
"Sights": sights
};
L.control.layers(overlayMaps).addTo(map);
But now I want to be able to make that work (hide and show the layer groups) with my own "buttons" (icons). My html:
但现在我希望能够使用我自己的“按钮”（图标）完成这项工作（隐藏和显示图层组）。我的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>
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!
我想使用 removeLayer 或类似的东西是可能的，但我不明白如何使它工作（显示和隐藏餐厅、运动和景点层）。所以，我想实现当我点击标题中的图标时我的图层是可见的，并且当我第二次点击它们时它们消失。非常感谢！
回答by YaFred
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>
Then, for each link you can write a handler like this (example with jQuery)
然后，对于每个链接，您可以编写这样的处理程序（使用 jQuery 的示例）
$("#restaurants").click(function(event) {
event.preventDefault();
if(map.hasLayer(restaurants)) {
$(this).removeClass('selected');
map.removeLayer(restaurants);
} else {
map.addLayer(restaurants);
$(this).addClass('selected');
}
});
You have an example here http://jsfiddle.net/FranceImage/c5Yfb/
回答by willedanielsson
First you need the classnames for the three buttons (restaurants, sports and sights). Then in Javscript you add: `
首先，您需要三个按钮（餐厅、运动和景点）的类名。然后在 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;
};
It is the setFilter-function that you will want to use and here is a good example Mpabox - Filtering Markers.
这是setFilter您将要使用的功能，这里是一个很好的示例Mpabox-Filtering Markers。
The solution from @FranceImage should also work just fine.
@FranceImage 的解决方案也应该可以正常工作。
