如何在Openlayers 3.3.0中删除单个叠加层?

时间:2015-03-16 20:11:53

标签: overlay openlayers-3

我在地图应用程序中创建叠加层,我需要每隔5秒刷新一次。我只是难以使用下面的代码从我的地图中删除陈旧的叠加层。 map.removeOverlay方法似乎无法正常工作。仅经过几次迭代后,覆盖层的堆叠明显可见。

使用map.getOVerlays().clear()删除陈旧的叠加层,但是,这会删除所有不需要的叠加层。对此有任何帮助表示赞赏。

window.setInterval(function() {
 $.ajaxSetup({ mimeType: "text/plain" });
  $.getJSON('json/DATA.json', function(data) {
      $.each(data.item, function(key, val) {
         var storeName = this.name;
         var storeLocation = this.location;
         var storeLatitude = this.latitude;
         var storeLongitude = this.longitude;
           $.each(val.tasks, function(i, j){
             var taskName = this.name;
             var taskState = this.state;
               if (taskState == "Open") {
                var taskGeometry = ol.proj.transform([storeLongitude,storeLatitude], 'EPSG:4326', 'EPSG:3857');
                function createCircleOutOverlay(position) {
                var elem = document.createElement('div');
                elem.setAttribute('class', 'circleOut');

                return new ol.Overlay({
                    element: elem,
                    position: position,
                    positioning: 'center-center'
                });
            }
                var taskOverlay = createCircleOutOverlay(taskGeometry);
                map.removeOverlay(taskOverlay);
                map.addOverlay(taskOverlay);
                }
           });
      });
     });

}, 5000);

1 个答案:

答案 0 :(得分:2)

            var taskOverlay = createCircleOutOverlay(taskGeometry);
            map.removeOverlay(taskOverlay);

问题是您正在尝试删除新的叠加而不是旧叠加。您必须存储对叠加层的引用,以便OpenLayers可以将其从地图中删除。类似的东西:

var currentOverlay = null;
window.setInterval(function() {
 $.ajaxSetup({ mimeType: "text/plain" });
                // ...
                if (currentOverlay === null) {
                  map.removeOverlay(currentOverlay);
                }
                currentOverlay = createCircleOutOverlay(taskGeometry);
                map.addOverlay(currentOverlay);
               // ...