Question

我有一张地图，显示了新西兰奥克兰市公共交通路线的不同地理位置。我在页面上添加了一些按钮，与传单地图无关，我只想选择一个按钮，或者单击其他按钮时删除上一个geoJson图层

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

php artisan migrate

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>

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

Answer 1

您希望对“ Leaflet Layers”实施独占选择，类似于“ Leaflet Layers Control”底图的工作方式，但需要使用外部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>

单击其他HTML按钮时是否要删除先前的geoJSON图层？

1 个答案: