it-swarm.com.de

Entfernen von Prospektschichten und L.Marker-Methode

Ich habe mich gefragt, ob jemand weiß, wie oder ob Sie tatsächlich eine Ebene von Punkten entfernen können, nachdem Sie sie mit dieser Konvention hinzugefügt haben:

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

Die typische removeLayer (pointsLayer); innerhalb einer ähnlichen for-Schleife funktioniert das bei mir nicht. Das bedeutet jedoch nicht, dass es keinen Weg zum Durchlaufen gibt. Ich weiß nur nicht genau wie. Ich versuche, Punkte hinzuzufügen, die funktionieren, und sie dann bei einem Ereignis zu entfernen (funktioniert nicht). Irgendwelche Ideen?

Danke euch allen.

P.S. Vergessen Sie nicht, die alten Daumen aufzugeben, wenn Sie der Meinung sind, dass diese Frage relevant oder hilfreich war. 

16
Mr. Concolato

Anstatt alle Marker direkt auf der Karte hinzuzufügen, können Sie die Marker auf einer separaten Ebene (d. H. var markers = new L.FeatureGroup();) und dann auf der Karte (map.addLayer(markers);) außerhalb der Schleife hinzufügen.

Zum Beispiel,

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

Wenn Sie die Marker-Ebene LÖSCHEN oder löschen müssen, um die Punkte in der Zukunft auszutauschen, verwenden Sie Folgendes:

markers.clearLayers();
39
melc

Verwenden Sie map.removeLayer():

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

Sie können alle Ebenen direkt in der Objektkarte übergehen.

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