在自己的按钮中隐藏/显示layerGroups小册子

我有一个包含多个标记的小册子地图。我已将这些标记放在“图层组”中，以便能够显示和隐藏标记类别。这是我的标志：在自己的按钮中隐藏/显示layerGroups小册子

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：

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或类似的东西，但我只是不明白它是如何使它工作（显示和隐藏餐馆，，sport-和景点层）。所以，我想实现它，即当我单击标题中的图标时，我的图层可见，并且当我再次点击时它们消失。非常感谢！

来源

2014-07-09 user3671746

首先你需要一个链接，每一层

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

来源

2014-07-10 11:49:13 YaFred

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

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

<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 -function，你将要使用的，这里是一个很好的例子Mpabox - Filtering Markers。

来自@FranceImage的解决方案也应该工作得很好。

来源

2014-07-10 12:04:36 willedanielsson

在自己的按钮中隐藏/显示layerGroups小册子

回答

相关问题