web-dev-qa-db-fra.com

Suppression des couches de feuillets et de la méthode L.marker

Je me demandais si quelqu'un savait comment ou si vous pouvez réellement supprimer une couche de points après les avoir ajoutés en utilisant cette convention:

var pointsLayer, someFeatures = [{
            //Hard coded for now
            "type": "Feature",
            "properties": {
                "name": "Company A",
                "show_on_map": true,
                "icon": 'img/violations.png'
            },
            "geometry": {
                "type": "Point",
                "coordinates": [43.22519, -107.69348]
            }
        }, {
            "type": "Feature",
           .
           .
           .
   }];
for(w=0; w < someFeatures.length; w++){
                pointsLayer = L.marker(someFeatures[w].geometry.coordinates, {icon: violations})   
                    .bindPopup("Company: "+someFeatures[w].properties.name);
                    //add map points 
                    map.addLayer(pointsLayer);
            }

Le removeLayer typique (pointsLayer); dans une boucle similaire, cela ne fonctionne pas pour moi. Mais, cela ne signifie pas qu'il n'y a pas de moyen de passer en boucle. Je ne sais pas exactement comment. J'essaie d'ajouter des points, ce qui fonctionne, puis de les supprimer lors d'un événement (qui ne fonctionne pas). Des idées?

Merci a tous.

P.S. S'il vous plaît n'oubliez pas de laisser les vieux coups de pouce si vous pensez que cette question était pertinente ou utile, à la vôtre. 

javascriptleaflet
16
Mr. Concolato

Au lieu d’ajouter tous les marqueurs directement sur la carte, vous pouvez les ajouter à un calque séparé (par exemple, var markers = new L.FeatureGroup();), puis ajouter ce calque sur la carte (map.addLayer(markers);) en dehors de la boucle.

Par exemple,

http://jsfiddle.net/9BXL7/

html

<button>remove all markers</button>
<div id="map"></div>

css

html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

js

var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
    key: 'BC9A493B41014CAABB98F0471D759707'
});

var map = L.map('map')
    .setView([50.5, 30.51], 15)
    .addLayer(cloudmade);

var markers = new L.FeatureGroup();

function getRandomLatLng(map) {
    var bounds = map.getBounds(),
        southWest = bounds.getSouthWest(),
        northEast = bounds.getNorthEast(),
        lngSpan = northEast.lng - southWest.lng,
        latSpan = northEast.lat - southWest.lat;

    return new L.LatLng(
    southWest.lat + latSpan * Math.random(),
    southWest.lng + lngSpan * Math.random());
}

function populate() {
    for (var i = 0; i < 10; i++) {
        var marker = L.marker(getRandomLatLng(map));
        marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>", {
            showOnMouseOver: true
        });
        markers.addLayer(marker);
    }
    return false;
}

map.addLayer(markers);

populate();
function removeAllMarkers(){
    map.removeLayer(markers);
}
document.querySelector('button').onclick=function(){removeAllMarkers()};

Si vous devez supprimer ou effacer la couche de marqueurs pour échanger les points ultérieurement, utilisez:

markers.clearLayers();
39
melc

Utilisez map.removeLayer():

var circle = L.circle([lat, lng], 1000).addTo(map);
map.removeLayer(circle);
11
f1lt3r

Vous pouvez parcourir toutes les couches directement dans l'objet 'map'.

for ( key in map['_layers'] ){
    if(typeof map['_layers'][key]['feature'] !== 'undefined') {
        var l = map['_layers'][key];
        if( l['feature']['properties']['name'] === 'Company A' ) l.removeFrom(map);}}
0
user8445714