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?

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?

• javascript
• openlayers-3
• geojson
• loaddata

• Why don't you try all three and see what the perf differences are? openlayers/en/master/apidoc/ol.loadingstrategy.html – Nick Commented Apr 8, 2015 at 19:17

1 Answer 1

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.