Delete VectorLayer

Question

Ich versuche VectorSource Layer für Redraw-Marker zu löschen. Das Problem ist, dass, wenn ich eine setInterval-Funktion alle 3 Sekunden ausführen, die neuen Markierungen zu vorherigen Markierungen überlappen. Die vorherigen Markierungen werden nicht gelöscht.

Ich versuche mit
map.getLayers(). Item (1) .getSource(). Clear(); map.getLayers(). Item (1) .getSource(). GetSource(). Clear(); Aber es funktioniert nicht. So

:

Mi-Code ist:

var vectorSource = new ol.source.Vector({ 
features: iconFeatures //add an array of features 
}); 

var clusterSource = new ol.source.Cluster({ 
source: vectorSource, 
distance: 40 
}); 


var vectorLayer = new ol.layer.Vector({ 
source: clusterSource, 
style: clusterStyle 
}); 

// Maps 
     var map = new ol.Map({ 
      controls: ol.control.defaults({ 
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
      collapsible: false 
      }) 
      }), 
      target: 'map', // The DOM element that will contains the map 
      renderer: 'canvas', // Force the renderer to be used 
      layers: [ 
       // Add a new Tile layer getting tiles from OpenStreetMap source 
       new ol.layer.Tile({ 
        source: new ol.source.OSM() 

        //source: new ol.source.OSM({ 
        //crossOrigin: null, 
        //url: 'http://34.240.39.198/osm_tiles/{z}/{x}/{y}.png', 
        //}), 
       }), 
       vectorLayer, 
      ], 
      // Create a view centered on the specified location and zoom level 
      view: new ol.View({ 
       center: ol.proj.transform([-3.7467975, 40.3705281], 'EPSG:4326', 'EPSG:3857'), 
       zoom: 3, 
       maxZoom: 15, 
       minZoom:2, 
       //extent: [226838, 5084100, 255700, 5055200], 

      }), 
      /*interactions: ol.interaction.defaults({ 
       dragPan: false 
      }),*/ 
     }); 

Und Funktion für Redraw ist:

function get_traces(){ 

    var token = $('meta[name="csrf-token"]').attr('content'); 


    $.ajax({ 
    type: "post", 
    url: "device_mapA", 
    typeData:'JSON', 
    data: { 
     '_method': 'POST', 
     '_token': token, 

    }, success: function (showdevice) { 

     removeAllMarkers(); 


      iconFeatures = []; 

     showdevice[0].forEach(function(index) { 




      changeMarker(showdevice[0]); //this function redraw iconFeatures array correctly. 


    });    
    }); 

// console.log(iconFeatures); 



    var vectorSource = new ol.source.Vector({ 
     features: iconFeatures //add an array of features 
    }); 

    var clusterSource = new ol.source.Cluster({ 
     source: vectorSource, 
     distance: 40 
    }); 

    var vectorLayer = new ol.layer.Vector({ 
     // source : vectorSource, 
     source: clusterSource, 
     style: clusterStyle 
     }); 
    map.getLayers().item(1).getSource().clear(); 
map.getLayers().item(1).getSource().getSource().clear(); 
    map.addLayer(vectorLayer); 

    map.getLayers().item(1).getSource().clear(); 

    //console.log(map.getLayers().item(1).getSource()); It not working neither. 

    } 

Answer 1

Es ist nicht wirklich abbrechen diese 7 Iterationen, es springt nur diese Array-Elemente.

In Ihrem forEach-Zyklus gibt es eine Reihe von Referenzen auf Kartenebenen. Wenn Sie ein Element dieses Arrays nehmen (Referenz ist "Layer") und es aus der Map entfernen, entfernen Sie den Verweis, so dass er weder in der Map noch in Ihrem Array mehr vorhanden ist und versehentlich eine andere Referenz darauf existiert Index.

Also, wenn Sie Array:

0: Layer0, name "Layer0"

1: layer1, name "layer1"

2: Layer2

nach diesem forEach wird es bleiben

0: layer1, name "layer1"

1: layer2

weil nach dem Entfernen von Schicht0, ist Schicht1 auf dem Index 0 und AFTER dass forEach entlang (zum Index 1) bewegt, wo es bereits Schicht ohne Namen findet.

Um das zu lösen, benutzen Sie einfach Funktionen getArray() und Scheibe() (das Referenzfeld zu kopieren), so etwas wie die: