[GIS] OpenLayers 3 – refresh vector layer every 50 seconds – problem

openlayers

I have problem with fetchData function.
(
from Question: Equivalent of layer.redraw(true) in OpenLayers 3?
)

I need refresh my vectorSource every 50 seconds

my code:

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);
};

and on the end script I call:

fetchData();

features are added to map but no clear(), how to fix it.

Little modification of code:

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);

Now I have flash on vector layer features, old features are clear(), but before new ones are added to the layer. I'm not fluent in javascript this solution is lame… Maybe somebody fluent in javascript fix it.

Best Answer

And the end solution:

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);

And sample code http://jsfiddle.net/ahocevar/tLt5wdpz/. and topic about: https://github.com/openlayers/ol3/issues/4558

Ps.2 static strategy (insted ol.loadingstrategy.bbox) prevent to duplicates features at my vector layer. Ps.3 If I set on GeoServer wfs layer field id then have no more duplicates features on bbox strategy.

Related Question