OpenLayers refresh vector source with bbox strategy after map moved

Question

I have a vector layer, in GeoJSON with a Vector source on which I applied the BBOX strategy. I have unique IDs for each feature in the layer and having a look at the network tab in the browser the strategy is working, bringing back all the features at a given extent, whenever I move the map.

The problem is that the returned features sum up on the Vector source and they don't get replaced by the new ones in the extent (those which are not in the extent just stay in the source).

How could I refresh the source with the new returned features (only in the current extent) and removing from the source those which are not in the extent?

What I am trying to achieve is a way to get the features loaded with each map moved, clear the vector source and replace the features with the new loaded. But I am not sure how and where to accomplish this.

    var vectorSource = new ol.source.Vector({
    format: formatGEOJSON,
    url: function(extent) {
        return 'http://localhost/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=workspace:layer&' + 
        'outputFormat=application/json&srsname=EPSG:27700&bbox='.concat(extent.join(','), ',EPSG:27700');
    },
    strategy: ol.loadingstrategy.bbox
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 204, 0, 1)',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 204, 0, 0.2)'
            }
        )
    }),
    minResolution: 0,
    maxResolution: 20,

});

You could try using a loader function similar to the one in the documentation https://openlayers.org/en/v4.6.5/apidoc/ol.source.Vector.html and insert vectorSource.clear(); as the first line of the function. — Mike, May 14 '19 at 11:04
Thanks for the answer but that is not the way to do it see https://github.com/openlayers/openlayers/issues/3812 — user3523583, May 14 '19 at 13:15
Rereading your question and your comment: clear() is in your case the way to do it, because you want to clear all features that are not in your extent. The bug in the Github issue is due to the unique IDs and something different. — bennos, May 14 '19 at 14:29
I tried editing an old sample, the infinite loop happens when clear() is called in the ajax callback (being asynchronous it triggers another load) but doesn't happen if the clear is done synchronously before the ajax call. A separate issue is when moving within an extent which has already been loaded (i.e. zooming in then moving) OpenLayers makes no attempt to reload because the bbox is already loaded. So it would be better to listen for map move or view change events to clear the source. The suggested custom loading strategy would need a debug build to access loaded the extents. — Mike, May 14 '19 at 14:32
What about putting vectorSource.clear() call in strategy option: strategy: function(extent) { vectorSource.clear(); return [extent]; }? — TomazicM, May 14 '19 at 15:46

Mike · Accepted Answer · 2019-05-15T14:14:36.013

Building on @TomazicM 's suggestion (which results in another infinite loop) a refinement is needed to check if the bbox has changed before clearing the source:

var vectorSource = new ol.source.Vector({
    format: formatGEOJSON,
    url: function(extent) {
        return 'http://localhost/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=workspace:layer&' + 
        'outputFormat=application/json&srsname=EPSG:27700&bbox='.concat(extent.join(','), ',EPSG:27700');
    },
    strategy: function(extent) {  
        var bbox = extent.join(',');
        if (bbox != this.get('bbox')) {
            this.set('bbox', bbox);
            vectorSource.clear();
        }
        return [extent];
    }
});

OpenLayers refresh vector source with bbox strategy after map moved

1 Answers1

Linked