OpenLayers 3 - actualizar la capa vectorial cada 50 segundos - problema

Question

Tengo un problema con la función fetchData. ( de la pregunta: ¿Equivalente a layer.redraw(true) en OpenLayers 3? )

Necesito refrescar mi vectorSource cada 50 segundos

mi código:

var vectorLoader = function(extent, resolution, projection) {
var url = 'http://xxxx:8080/geoserver/ant_mapy/wfs?service=WFS&' +
    'version=2.0.0&request=GetFeature&typename=ant_mapy:v_wezel_rfid&' + 
    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
    '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
$.ajax({
  url: url,
  dataType: 'jsonp'
});
};      

var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: vectorLoader,
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
  maxZoom: 19
}))
});

var loadFeatures = function(response) {
var features = vectorSource.readFeatures(response);
vectorSource.addFeatures(features);
 }; 

var fetchData = function() {
   var url = 'http://xxxx:8080/geoserver/ant_mapy/wfs?service=WFS&' +
    'version=2.0.0&request=GetFeature&typename=ant_mapy:v_wezel_rfid&' + 
    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
    '&srsname=EPSG:3857';

$.ajax(url,{
    dataType: 'jsonp',
    success: function (data, textStatus, jqXHR) {
    vectorSource.clear();
    vectorSource.addFeatures(vectorSource.readFeatures(data));
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
        }
    });
//call this again in 50 seconds time
updateTimer = setTimeout(function () {
    fetchData();
}, 50000);
};

y en el guión final llamo:

fetchData(); 

las características se añaden al mapa pero no hay clear(), cómo solucionarlo.

Pocas modificaciones en el código:

var osm = new ol.source.XYZ({ url: 'http://xxxx:81/mapy/a_tiles/{z}/{x}/{y}.png'  });
var osmLayer = new ol.layer.Tile({
    source: osm, //new ol.source.OSM(),
    opacity: 1,
    brightness: 0.1
    });

var fill = new ol.style.Fill({
color: 'rgba(205,255,127,0.4)'
 });

var stroke = new ol.style.Stroke({
color: 'rgba(137,170,85,0.1)',
lineJoin: 'round', //round, mitre, bevel
width: 10
 });

var circle = new ol.style.Circle({
radius: 20,
fill: fill,
stroke: stroke
});

var vectorStyle = new ol.style.Style({
fill: fill,
stroke: stroke,
image: circle
});

var vectorLoader = function(extent, resolution, projection) {
var url = 'http://xxxx:8080/geoserver/ant_mapy/wfs?service=WFS&' +
    'version=2.0.0&request=GetFeature&typename=ant_mapy:v_wezel_rfid&' + 
    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
    '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
$.ajax({
  url: url,
  dataType: 'jsonp'
});
};      

var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: vectorLoader,
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
  maxZoom: 19
}))
});

var loadFeatures = function(response) {
 var features = vectorSource.readFeatures(response);
 vectorSource.addFeatures(features);
}; 

var serverVector = new ol.layer.Vector({
source: vectorSource,
style: vectorStyle
});

function refresh(vectorSource){
$.ajax({
  url: 'http://mpecfs5:8080/geoserver/ant_mapy/wfs?service=WFS&' +
    'version=2.0.0&request=GetFeature&typename=ant_mapy:v_wezel_rfid&' + 
    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
    '&srsname=EPSG:3857', 
  dataType:'jsonp'
    });
 vectorSource.clear(true);
}

var bia = ol.proj.transform([23.150, 53.130], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
    center: bia,
    zoom:14
    });
var map = new ol.Map({
    target: 'right',
    layers: [osmLayer, serverVector],
    controls: ol.control.defaults({
        zoom: true,
        attribution: true,
        rotate: true
    }),
    view: view
    });

setInterval(function(){ refresh(vectorSource); }, 50000); 

Ahora tengo flash en las características de la capa vectorial, las características viejas son clear(), pero antes de que los nuevos se añaden a la capa. No soy fluido en javascript esta solución es cojo... Tal vez alguien con fluidez en javascript solucionarlo.

Answer 1

Y la solución final:

var vector;
function reload() {
  var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent, resolution, projection) {
      return 'http://xxxx/xxx?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=ant_mapy:v_wezel_rfid&' +
        'outputFormat=application/json&srsname=EPSG:3857&' +
        'bbox=' + extent.join(',') + ',EPSG:3857';
    },
    strategy: function() { return [ [2553624.5, 6988200.5, 2602467.0, 7022520.0] ]; }//ol.loadingstrategy.bbox
  });

  var newLayer = new ol.layer.Vector({
    source: vectorSource,
    style: vectorStyle,
    title: 'RFID',
    description: 'some description'
  });
  map.addLayer(newLayer);
  vectorSource.once('change', function() {
    console.log('remove')
    if (vector) {
      map.removeLayer(vector);
    }
    vector = newLayer;
  });
}

...

reload();
window.setInterval(reload, 50000);

Y el código de muestra http://jsfiddle.net/ahocevar/tLt5wdpz/ . y el tema sobre: https://github.com/openlayers/ol3/issues/4558

Sal.2 estático estrategia (en lugar de ol.loadingstrategy.bbox ) evitan que se dupliquen las características en mi capa vectorial. Ps.3 Si establezco en GeoServer wfs campo de identificación de la capa entonces no tienen más características duplicadas en la estrategia bbox.