web-dev-qa-db-fra.com

Leaflet.js: Comment supprimer plusieurs couches de la carte

J'utilise Leaflet.js pour une carte. Maintenant, je veux supprimer les couches ajoutées de la carte. En cliquant sur le bouton d'entrée #, toutes les cases à cocher cochées doivent être remplacées par des cases non cochées et toutes les couches correspondantes doivent être supprimées de la carte.

Pour supprimer une couche de la carte, l'identifiant de la couche est nécessaire. Cet identifiant est égal à l'identifiant de la case à cocher correspondante. C'est pourquoi j'utilise jQuery pour obtenir les identifiants de toutes les cases à cocher cochées et stocker leur valeur dans un objet, appelé ici someObj.idsChecked. 

Quand j'essaie d'utiliser la valeur stockée val pour supprimer une couche, il ne fonctionne pas alors que le console.log affiche la valeur recherchée. Ici par exemple: mapcat52.

En insérant l’id précédent codé en dur dans la fonction comme map.removeLayer (mapcat52) cela fonctionne comme prévu.

Où est l'erreur dans mon code ou dans mes pensées? 
Toute aide est très appréciée.

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

...

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

});
javascriptjquerycheckboxmapsleaflet
8
LuNarez

Selon l'API Leaflet, doc http://leafletjs.com/reference.html#map-removelayer , removeLayer prend un paramètre ILayer: removeLayer( <ILayer> layer ) mais vous lui transmettez une chaîne: $(this).attr("id")

Il semble que vous ayez déjà l’objet calque dans une variable: mapcat52. Vous pouvez enregistrer les objets de calque lorsque vous les créez, puis les rechercher par ID pour les transmettre à 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); 
});
6
kielni

Je dirais que la meilleure façon de supprimer/ajouter (basculer) des couches de la carte serait d’utiliser un LayerGroup .

Avant d'ajouter des couches individuelles à la carte, ajoutez-les plutôt à un groupe de couches, puis ajoutez ce groupe de couches à votre carte.

Ensuite, lorsque vous devez supprimer les couches, appelez simplement la fonction clearLayers ().

Découvrez l'API pour LayerGroup http://leafletjs.com/reference.html#layergroup

Exemple

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

Lorsque la case à cocher est cochée

assetLayerGroup.clearLayers();
19
Shriram Sharma

J'ai écrit l'exemple ci-dessous pour montrer comment supprimer plusieurs couches de geoJSON.

/// ajout de données geoJSON

      var myGeoJSON = L.geoJSON(myData, {

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

    });

////// fonction pour supprimer les couches geoJSON 

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

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

        });

}

//// fonction appelante 

removeMarkers ();

0
Mercel Santos