Equivalent of layer.redraw(true) in OpenLayers 3?

Question

I have a geojson layer in my OL3 app which I want to redraw every 5 seconds (to show movement on map) .

How do I do it ? Couldn't find the equivalent of Layer.redraw().

Answer 1

This is how you can refresh a vector source every 5 seconds, from a web service returning features in a GeoJSON document:

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

window.setTimeout(function() {
  $.ajax('http://example.com/data.json', function(data) {
    var features = geojsonFormat.readFeatures(data
        {featureProjection:"EPSG:3857"});
    geojsonSource.clear();
    geojsonSource.addFeatures(features);
  });
}, 5000);

jQuery is used here for requesting the data through Ajax ($.ajax), but you can obviously use the library of your choice.

This code snippet also assumes that the map's projections is "EPSG:3857" (web mercator) and that the coordinates in the GeoJSON documents are longitudes and latitudes.

Answer 2

I know that this question is old but i've finally found a solution to refresh a layer on openlayers 3.

You have to update params of the layer source like this:

var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);

Answer 3

You can refresh a WFS layer with myLayer.getSource().clear().

Answer 4

You can use the changed method for layers to indicate a change and let OL repaint it:

layer.changed();

Answer 5

With OL2 I used a layer refresh strategy which hasn't been added to OL3. Below is a self calling function that will use an ajax request to fetch the GeoJSON and then read it and add it to a source.

var yourSource = new ol.source.GeoJSON();

//add this source to a layer, the layer to a map with a view etc
...

//now fetch the data
var fetchData = function () {
    jQuery.ajax(url,
    {
        dataType: 'json',
        success: function (data, textStatus, jqXHR) {
            yourSource.clear(); //remove existing features
            yourSource.addFeatures(yourSource.readFeatures(data));
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    //call this again in 5 seconds time
    updateTimer = setTimeout(function () {
        fetchData();
    }, 5000);
};
fetchData(); //must actually call the function!

Hope this helps.

Answer 6

There is no need to refresh explicitly. Each time you update the content of a layer the map is refreshed requesting a new frame rendering.

To force rendering manually you have map.render() and map.renderSync()methods.

Answer 7

I don't know if in OpenLayer 3 this works, but in actual version (OL6) I use a simple

layer.setStyle(layer.getStyle())