Leaflet.js: Jak usunąć wiele warstw z mapy

Question

Używam pliku Leaflet.js do wyświetlenia na mapie. Teraz chcę usunąć dodane warstwy z mapy. Klikając na przycisk wejściowy #, wszystkie zaznaczone pola wyboru zostaną zmienione na niezaznaczone, a wszystkie odpowiednie warstwy zostaną usunięte z mapy.

Aby usunąć warstwę z mapy, wymagany jest identyfikator warstwy. Ten identyfikator jest równy identyfikator odpowiedniego pola wyboru. Dlatego używam jQuery, aby uzyskać identyfikatory wszystkich zaznaczonych pól wyboru i zapisać ich wartość w obiekcie o nazwie someObj.idsChecked.

Kiedy próbuję użyć zapisanej wartości val usunąć jedną warstwę to nie działa natomiast console.log wyświetla wartość chcieliśmy. Tutaj na przykład: mapcat52.

Podczas wstawiania poprzedniego identyfikatora twardego zakodowanego w funkcję taką jak map.removeLayer (mapcat52) działa zgodnie z oczekiwaniami.

Gdzie jest błąd w moim kodzie lub moich myślach?
Każda pomoc jest doceniana.

HTML

<input type="button" id="selectnone" value="deselect all" /> 

<!-- checkboxes --> 
<input id="mapcat52" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat52">Map Layer One</label> 

<input id="mapcat53" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat53">Map Layer Two</label> 

... 

JS:

$('#selectnone').click(function() { 
    var someObj = {}; 
    someObj.idsChecked = []; 

    $("input:checkbox").each(function() { 
     if ($(this).is(":checked")) { 

      someObj.idsChecked.push($(this).attr("id")); 
     } 
    }).attr('checked', false); 

    $.each(someObj.idsChecked,function(id, val) { 

      // displays the wanted value, e.g. "mapcat52" if checkbox with this id is checked 
      console.log(val); 

      // does not work: inserted value 
      map.removeLayer(val); 

      // works: hard coded value of the leaflet.js/input id 
      map.removeLayer(mapcat52); 
     }); 

}); 

Answer 1

Według doc Ulotka API http://leafletjs.com/reference.html#map-removelayer, removeLayer bierze parametr iLayer: removeLayer(<ILayer> layer) ale jesteś przekazując mu ciąg znaków: $(this).attr("id")

Wygląda na to, że obiekt warstwy ma już zmienną: mapcat52. Można zapisać obiektów warstwy podczas ich tworzenia, a następnie wyszukać je przez id przejść do removeLayer:

var layers = new Array(); 

// create layer 
var mapcat52 = new MyCustomLayer(latlng); 

// save to layers list 
layers["mapcat52"] = mapcat52; 
... 

// remove layers 
$.each(someObj.idsChecked, function(id, val) { 
    // look up layer object by id 
    var layerObj = layers[val]; 
    // remove layer 
    map.removeLayer(layerObj); 
}); 

Answer 2

powiedziałbym najprostszy sposób, aby usunąć/dodać (przełączyć) warstw z mapy byłoby użyć a LayerGroup.

Przed dodaniem pojedynczych warstw do mapy należy dodać je do grupy LayerGroup, a następnie dodać grupę LayerGroup do mapy.

Następnie, gdy trzeba usunąć warstwy, wystarczy wywołać funkcję clearLayers().

Sprawdź API dla grupy warstw http://leafletjs.com/reference.html#layergroup

Przykład

var map = L.map('leafletMap', {minZoom:11}).setView([37.8, -96], 11); 
var assetLayerGroup = new L.LayerGroup(); 
var marker1 = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'); 
var marker2 = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'), 
assetLayerGroup.addLayer(marker1); 
assetLayerGroup.addLayer(marker2); 

Kiedy usuń pole wyboru jest zaznaczone

assetLayerGroup.clearLayers();