Question

我正在尝试删除重绘标记的VectorSource图层。问题是当我每3秒执行一次setInterval函数时，新标记会重叠到之前的标记。以前的标记不会被删除。

我正在尝试用。map.getLayers（）项（1）.getSource（）清除（）。。map.getLayers（）项（1）.getSource（）的getSource（）清除（）。但它不起作用。

所以：

Mi代码是：

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

Redraw的功能是：

  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

它实际上并没有中止这7次迭代，它只是跳过那些数组项。

在forEach循环中，有一组对地图图层的引用。如果您获取该数组的元素（引用是“图层”）并将其从地图中删除，则删除引用，因此它既不在地图中也不在数组中，并且不小心有另一个引用索引。

所以如果你有数组：

0：layer0，名称“layer0”

1：layer1，名称“layer1”

2：layer2

在此之后，每个人都将保留

0：layer1，名称“layer1”

1：layer2

因为在删除layer0之后，索引0上有layer1，而且forEach后移动（到索引1），它已经找到了没有名称的图层。

要解决这个问题，只需使用函数getArray（）和slice（）（复制引用数组），就像这样：

删除VectorLayer

1 个答案: