单击其他 HTML 按钮时删除以前的 geoJSON 图层?

Question

我有一张地图，显示了新西兰奥克兰公共交通路线的各种geoJson图层。我在页面上添加了一些按钮，独立于传单地图，我只想选择一个按钮，或者在单击其他按钮时删除以前的 geoJson 图层

我已经尝试了各种解决方案，到目前为止，我有这个工作：

HTML: 
<button class='btn' id="busButton">Bus Services</button>
<button class='btn' id="cycleButton">Cycle Lanes</button>
<button class='btn' id="ferryButton">Ferry Routes</button>

Script: 
$("#busButton").click(function(event) {
event.preventDefault();
if(map.hasLayer(busRoutesLayer)) {
$(this).removeClass('selected');
map.removeLayer(busRoutesLayer);
} else {
map.addLayer(busRoutesLayer);
$(this).addClass('selected');
}
});
$("#cycleButton").click(function(event) {
event.preventDefault();
if(map.hasLayer(cycleRouteLayer)) {
$(this).removeClass('selected');
map.removeLayer(cycleRouteLayer);
} else {
map.addLayer(cycleRouteLayer);
$(this).addClass('selected');
}
});

到目前为止，这让我可以选择多个图层，但我不知道如何设置一个函数来在地图上已经有一个图层时删除一个图层，或者在图层关闭之前使其他按钮不可单击。任何帮助表示赞赏。

Answer 1

您希望实现传单图层的独占选择，这与传单图层控制底图的工作方式类似，但使用外部 HTML 按钮。

一个非常简单的解决方案是从地图中盲目移除所有这些图层，然后重新添加与单击按钮关联的图层。因此，无论哪一层都让位于新的层。当您尝试删除不存在的东西时，传单不会爆炸。

这与按钮的独占类切换完全相同的常用解决方案：您可以从所有按钮中盲目删除"选定"类，然后将其添加回新单击的按钮。

为了轻松地从地图中移除所有图层，您可以使用添加到地图中的中间图层组而不是图层。然后将图层添加到该组，而不是直接添加到地图。然后，当您要删除所有内容时，只需在组上使用clearLayers：

var map = L.map('map').setView([48.86, 2.35], 11);
var all = L.layerGroup().addTo(map)
var layer1 = L.circleMarker([48.86, 2.3]);
var layer2 = L.circleMarker([48.86, 2.4]);
$('button').click(function() {
all.clearLayers();
$('button').removeClass('selected');
$(this).data('layer').addTo(all);
$(this).addClass('selected');
});
$('#layer1btn').data('layer', layer1);
$('#layer2btn').data('layer', layer2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
height: 100%;
margin: 0;
}
#map {
height: calc(100% - 35px);
}
.selected {
color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet-src.js" integrity="sha512-GBlVVqOnLycKN+z49gDABUY6RxEQjOw/GHFbpboxpTxAPJQ78C6pAjT08S/1fT9pWOy9PeyDqipC7cBwrfX2cA==" crossorigin=""></script>
<div id="map"></div>
<button id="layer1btn">Layer 1</button>
<button id="layer2btn">Layer 2</button>