Delete VectorLayer

Question

I am trying to delete VectorSource Layer for redraw markers. The problem is that when I execute a setInterval function every 3 seconds, the new markers overlap to previous markers. The previous markers are not deleted.

I am trying with
map.getLayers().item(1).getSource().clear(); map.getLayers().item(1).getSource().getSource().clear(); But it not work.

So:

Mi code is:

 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
            }),*/
        });

And function for Redraw is:

  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

It does not actually abort those 7 iterations, it just skips those array items.

In your forEach cycle there is an array of references to map layers. If you take an element of that array (reference is "layer") and you remove it from map as it is, you remove the reference, so it is neither in the map nor in your array anymore and accidentally there is another reference on that index.

So if you have array:

0: layer0, name "layer0"

1: layer1, name "layer1"

2: layer2

after this forEach there will remain

0: layer1, name "layer1"

1: layer2

because after removal layer0, there is layer1 on the index 0 and AFTER that forEach moves along (to index 1), where it already finds layer without name.

To solve that, just use functions getArray() and slice() (to duplicate the reference array), something like that: