VectorLayer 삭제

Question

다시 그리기 표시를 위해 VectorSource Layer를 삭제하려고합니다. 문제는 매 3 초마다 setInterval 함수를 실행할 때 새 마커가 이전 마커와 중첩된다는 것입니다. 이전 마커는 삭제되지 않습니다.

나는 시도하고있다
map.getLayers(). 항목 (1) .getSource(). clear(); map.getLayers(). 항목 (1) .getSource(). getSource(). clear(); 하지만 작동하지 않습니다.

그래서 :

미 코드는 다음과 같습니다 다시 그리기에 대한

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

그리고 기능은 다음과 같습니다

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 반복을 중단하지 않는, 그냥 그 배열 항목을 건너 뜁니다.

각주기에는지도 레이어에 대한 참조 배열이 있습니다. 해당 배열의 요소 (참조가 "레이어"임)를 가져 와서 그대로지도에서 제거하면 참조가 제거되어 맵이나 배열에서 더 이상 나타나지 않으며 실수로 다른 참조가 있습니다 색인.

0 : layer0, 이름이 "layer0"

1 : 레이어 1, 이름 "레이어 1"

2 :

그래서 당신은 배열에있는 경우이 대해 forEach 후 계층 2

이 것 남아

0 : 레이어 1, 이름 "레이어 1"

1 : layer2

인덱스 0에 layer1이 있고 이후에 forEach가 인덱스없이 인덱스없이 레이어를 찾았 기 때문에 인덱스 0에 layer1이 있습니다. 답변에 대한