javascript - 单击不同的 HTML 按钮时删除以前的 geoJSON 层？

Question

我有一张 map 显示了新西兰奥克兰公共(public)交通路线的各种 geoJson 图层。我在页面上添加了一些独立于传单 map 的按钮，我只想选择一个按钮，或者在单击其他按钮时删除之前的 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');
        }
    });

到目前为止，这让我可以选择多个图层，但我不知道如何设置一个功能来删除 map 上已经存在的图层，或者让其他按钮在图层关闭之前不可点击。任何帮助表示赞赏。

Answer 1

您想要实现对 Leaflet 图层的独家选择，类似于 Leaflet Layers Control basemap 的工作方式，但使用外部 HTML 按钮。

一个非常简单的解决方案是盲目地从 map 中删除所有这些层，然后添加回与单击按钮关联的层。所以无论哪一层都让位于新的一层。当您尝试删除不存在的内容时，Leaflet 不会爆炸。

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

为了轻松地从 map 中删除所有图层，您可以使用添加到 map 的中间图层组来代替您的图层。然后将您的图层添加到该组而不是直接添加到 map 。然后当你想删除所有东西时，你可以简单地使用 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>