javascript - Removing previous geoJSON layer when a different HTML button is clicked?

Question

I have a map that shows various geoJson layers of public transit routes in Auckland, NZ. I have added some buttons to the page, independent from the leaflet map, and I only want to have one selected, or to remove the previous geoJson layer when a different button is clicked

I have tried various solutions, so far I have this working:

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');
        }
    });

So far this lets me select multiple layers, but I do not know how to set up a function to remove a layer when one is already on the map, or make the other buttons unclickable until the layer is turned off. Any help appreciated.

标签： javascripthtmlleaflet

Answer 1

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

一个非常简单的解决方案是盲目地从地图中删除所有这些图层，并重新添加与单击按钮关联的图层。因此，那里的任何层都会让位于新层。当您尝试删除不存在的内容时，传单不会爆炸。

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

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

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>