Leaflet.js: So entfernen Sie mehrere Ebenen aus der Karte

Question

Ich verwende Leaflet.js für eine Karte. Jetzt möchte ich zusätzliche Layer von der Karte entfernen. Wenn Sie auf die Schaltfläche # klicken, werden alle markierten Kontrollkästchen deaktiviert und alle entsprechenden Ebenen werden aus der Karte entfernt.

Um eine Ebene aus der Karte zu entfernen, wird die ID der Ebene benötigt. Diese ID entspricht der ID des entsprechenden Kontrollkästchens. Deshalb benutze ich jQuery, um die IDs aller markierten Checkboxen zu erhalten und ihren Wert in einem Objekt zu speichern, hier someObj.idsChecked.

Wenn ich versuche, den gespeicherten Wert val zu verwenden, eine Schicht zu entfernen, es nicht während der den gewünschten Wert console.log Displays funktioniert. Hier zum Beispiel: mapcat52.

Beim Einfügen der vorherigen ID in die Funktion wie map.removeLayer (mapcat52) fest programmiert funktioniert es wie erwartet.

Wo ist der Fehler in meinem Code oder meine Gedanken?
Jede Hilfe wird sehr geschätzt.

Die 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> 

... 

Die 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

Nach dem Prospekt API doc http://leafletjs.com/reference.html#map-removelayer, nimmt removeLayer einen ilayer Parameter: removeLayer(<ILayer> layer) aber Sie es einen String vorbei sind: $(this).attr("id")

Es sieht so aus, als ob Sie das Layer-Objekt bereits in einer Variablen haben: mapcat52. Sie könnten die Layer-Objekte speichern, wenn Sie sie erstellen, so dass sie dann von id aufblicken removeLayer weitergeben müssen:

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

ich der einfachste Weg, Schichten zu entfernen/hinzufügen (Toggle) sagen würde, von der Karte zu verwenden, wäre a LayerGroup.

Bevor Sie einzelne Layer zur Karte hinzufügen, fügen Sie sie stattdessen zu einer LayerGroup hinzu und fügen diese LayerGroup dann zu Ihrer Map hinzu.

Dann, wenn Sie die Schichten entfernen müssen, rufen Sie einfach die clearLayers() -Funktion.

Schauen Sie sich die API für Layergruppe http://leafletjs.com/reference.html#layergroup

Beispiel

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

Wenn Entfernen Kontrollkästchen aktiviert ist

assetLayerGroup.clearLayers();