0

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.

  • If you need to update your code, click the "edit" link rather than posting a comment. – Pete Jun 18 '15 at 21:56
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.