如何在 JS 中的案例后重置传单地图

Question

您好，我遇到了以下问题：我在传单中有一张地图链接到 jquery 中的更改功能，具体取决于我在上一个查询的“select”中收到的 ID，在 JS 中输入以下案例：

//First the map
var map = L.map('map').setView([XXXX, XXXXX], 12);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    minZoom: 12,
    maxZoom: 100
}).addTo(map);

function popup(feature, layer) {
    if (feature.properties && feature.properties.COMUNA)
    {
        layer.bindPopup( "<strong>" + "INF.EX: " + "</strong>" + feature.properties.INF);
    }
};
//Finish the map
//Start the CASE
    $("body").on("change", "[name=EXAMPLE]", function ()
    {
        var NUM = $('#EXAMPLE').val();
        switch (NUM) {
            case '1':
                map.setView([XXXX, XXXX], 15,{
                    animate: true
                });

                var examplemap= L.geoJson(EXAMPLE_01, {
                    onEachFeature: popup
                });

                L.geoJson(EXAMPLE01).addTo(map);
                examplemap.addTo(map);
            break;
            case '2':
                map.setView([XXXX, XXXX], 15,{
                    animate: true
                });

                var examplemap= L.geoJson(EXAMPLE_02, {
                    onEachFeature: popup
                });

                L.geoJson(EXAMPLE02).addTo(map);
                examplemap.addTo(map);
            break;
}});

在选择另一个case时（存储在HTML中的一个select中）我选择的第一个case给我的数据还在map中，我怎么能获取要删除的地图中的这些数据，以便其他情况适用吗？

如果需要其他部分代码或者有不一致的地方，可以告诉我，谢谢！

Answer 1

要重置地图上的所有内容，您可以使用地图的 eachLayer method 删除之前添加的所有图层：

map.eachLayer((layer) => {
  layer.remove();
});

[编辑] 要仅删除特定图层，您需要跟踪它：

var map = L.map('map').setView([XXXX, XXXXX], 12);
var myLayer = new L.LayerGroup();
myLayer.addTo( map );
[...]
$("body").on("change", "[name=EXAMPLE]", function () {
[...]
switch (NUM) {
   case '1':
      [...]
      // remove everything from your layer (you should move this to a function)
      myLayer.eachLayer((layer) => {
        layer.remove();
      });
      // and then instead of adding to your map, add the layer to your    myLayer
      examplemap.addTo(myLayer);
      break;
      [...]
    // Same thing in the other case(s)
[...]

如何在 JS 中的案例后重置传单地图

How to reset a leaflet map after a case in JS

javascript

html

jquery

leaflet