webentwicklung-frage-antwort-db.com.de

Leaflet.js: So entfernen Sie mehrere Layer aus der Map

Ich verwende Leaflet.js für eine Karte. Jetzt möchte ich hinzugefügte Layer aus der Map entfernen. Durch Anklicken des Eingabefeldes # werden alle markierten Kontrollkästchen deaktiviert und alle entsprechenden Layer werden aus der Karte entfernt.

Um einen Layer aus der Map zu entfernen, wird die ID des Layers benötigt. Diese ID entspricht der ID des entsprechenden Kontrollkästchens. Aus diesem Grund verwende ich jQuery, um die IDs aller aktivierten Kontrollkästchen zu erhalten und ihren Wert in einem Objekt zu speichern, das hier aufgerufen wird someObj.idsChecked

Wenn ich versuche, den gespeicherten Wert zu verwenden val um eine schicht zu entfernen, funktioniert es nicht console.log zeigt den gewünschten Wert an. Hier zum Beispiel: mapcat52.

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

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

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

});
8
LuNarez

Gemäß dem Leaflet-API-Dokument http://leafletjs.com/reference.html#map-removelayer nimmt removeLayer einen ILayer-Parameter: removeLayer( <ILayer> layer ), aber Sie übergeben ihm einen String: $(this).attr("id")

Es sieht so aus, als hätten Sie das Layer-Objekt bereits in einer Variablen: mapcat52. Sie können die Ebenenobjekte speichern, wenn Sie sie erstellen, und dann nach ID suchen, um sie an removeLayer zu übergeben:

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); 
});
6
kielni

Ich würde sagen, dass der einfachste Weg zum Entfernen/Hinzufügen (Umschalten) von Ebenen von der Karte die Verwendung einer LayerGroup ist.

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

Wenn Sie dann die Ebenen entfernen müssen, rufen Sie einfach die clearLayers () - Funktion auf.

Überprüfen Sie die API für LayerGroup 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 das Kontrollkästchen "Entfernen" markiert ist

assetLayerGroup.clearLayers();
19
Shriram Sharma

Ich habe das folgende Beispiel geschrieben, um zu zeigen, wie mehrere GeoJSON-Layer entfernt werden.

/// Hinzufügen von GeoJSON-Daten

      var myGeoJSON = L.geoJSON(myData, {

        onEachFeature: function (feature, layer) {
            layer.myTag = "myGeoJSON"
        }

    });

////// Funktion zum Entfernen von GeoJSON-Layern 

var removeMarkers = function() {
    map.eachLayer( function(layer) {

      if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
        map.removeLayer(layer)
          }

        });

}

//// Funktion aufrufen 

removeMarkers ();

0
Mercel Santos