heinzwilli heinzwilli - 7 months ago 60
Javascript Question

openlayers loading strategy geojson with different resolutions

I'm trying to load geojson data with openlayers 3. It's a lot of date, so I want to transfer just the data needed. I archived this by passing resulution and extent of the current view to the webservice. This is my code so far:

var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'data.json?e=' + extent.join(',') + '&r=' + resolution;
$.ajax({
url: url,
success: function(data) {
vectorSource.addFeatures(vectorSource.readFeatures(data));
}
});
},
projection: 'EPSG:3857',
strategy: ol.loadingstrategy.bbox
});

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

var map = new ol.Map({
layers: [vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 0
})
});


But my code only calls the webservice once. Which loading strategy do I have to use to call the webservice everytime the extent (and/or the resulution) changes?

Answer

ol.source.ServerVector does not know that you return different results for different resolutions. It remembers the areas loaded and does not load an area if it "knows" that its features are already loaded.

Your example initially loads the whole world (zoom=0), therefore no additional load is needed ever. Replace zoom=0 by lets say zoom=10: now a zoom out will trigger a load, because the larger area is not already known, while a zoom in will not trigger a load.

To reload on every change of resolution, you have to clear the memory. Add after the definition of your map:

map.getView().on('change:resolution', function(evt){
    alert ('resolution changed');
    vectorSource.clear();
});

This code clears the memory each time the resolution changes and forces a load to be triggered.