How to force a ol.source.Vector to reload data from server?

Question

I have a ol.source.Vector like this:

var geoJSONFormat = new ol.format.GeoJSON();

vectorSource = new ol.source.Vector({
    strategy: ol.loadingstrategy.bbox,
    loader: function(extent, resolution, projection) {
        var url = getUrl( extent );
        $.ajax({
            url: url,
            dataType: 'json'
        }).then(function(response) {
            var features = geoJSONFormat.readFeatures( response, {featureProjection: 'EPSG:3857'} );
            console.log( features );
            vectorSource.addFeatures( features );
        })
    },
    format: geoJSONFormat
});


mapillaryLayer = new ol.layer.Vector({
    source: vectorSource
});

map.addLayer( mapillaryLayer );

When first load, all its ok. I can see the features on the map. When I pan the map to an undiscovered area, the features are updated from server.

But when I zoom in and pan to an already seen area (inside the original wide area before the zoom in) no new loads are made.

I know its a correct behaviour because all data inside this BBOX must be taken when zoomed out, so when zoom in I already have all I need for that area.

But I'm loading a limited amount of points in my query (maxresults):

var url = "getPhotosInBBOX?minlat="+minlat+"&minlon="+minlon+"&maxlat="+maxlat+"&maxlon="+maxlon+"&maxresults="+maxresults;

And now, even already loaded the BBOX content, I need to do a refresh because when zoom in, I need to have the same amount of data I have before.

Example: I have a bbox to show all Canada territory. So I will ask for 100 features from my server. Now, I'll zoom to Alberta. Alberta is inside Canada bbox and the layer will not load again. But I need to refresh to show 100 features inside this new bbox.

Why? My query is random. It takes 100 arbitrary features inside the view's current extent. May all be in Alberta, may not. When I zoom in, I need to take those I don't take before.

I don't know I'm clear. Ask for further informations.

Answer 1

I had the same requirement, loading a subset of data when zoomed out and loading more of that data when zoomed in. I solved it with help from this question: reload ServerVector with different zoom levels in openlaers3

First replace your vectorSource strategy strategy: ol.loadingstrategy.bbox with a custom loading strategy:

strategy: function(extent, resolution) {
    if(this.resolution && this.resolution != resolution){
        this.loadedExtentsRtree_.clear();
    }
    return [extent];
}

Second, at the beginning of your vectorSource loader function, add the following line:

this.resolution = resolution

Now when the resolution/zoom level changes, the loaded extents stored in the vectorSource will be cleared. You could make this a bit more intelligent by only removing the most recent extent for example, but this works well for me.

Answer 2

From here: https://github.com/openlayers/ol3/issues/3812

The source keeps track of extents that has been loaded, in order to only load new extents. This is done at request time. At response time, your loader function calls vectorSource.clear(true), which also clears the collection of loaded extents. So next time the maps checks if it should load a given extent, it sees that nothing is loaded and reloads. Calling clear will always cause the source to reload.

Answer 3

What I do to take advantage of caching while making sure that I get as much useful data as possible is to check the number of features in the source (when a move or zoom has taken place):

if (vectorSource.features.length == maxresults) {
    vectorSource.clear();
}