These are the code samples for The Book of OpenLayer3. Feel free to download the source code and contribute to this repository:
The left map uses a fixed strategy, that means WFS is queried only once for a given bounding box and no more queries are made. The right map, uses a ol.loadingstrategy.bbox
strategy which request the server each time we change the view and for the whole map's view extent.
// Tiled layer
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// Source using a fixed box strategy
var vsStrategyFixed = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'http://demo.opengeo.org/geoserver/wfs?'+
'service=WFS&request=GetFeature&'+
'version=1.1.0&typename=osm:water_areas&'+
'outputFormat=text/javascript&'+
'format_options=callback:loadFeaturesFixed&' +
'srsname=EPSG:3857&bbox=' + extent.join(',');
$.ajax({
url: url,
dataType: 'jsonp'
});
},
strategy: function() {
return [ [-8473015.930372493, 5673984.22207263, -8430593.37967422, 5704559.033386701] ];
},
projection: 'EPSG:3857'
});
// Executed when data is loaded by the $.ajax method.
var loadFeaturesFixed = function(response) {
vsStrategyFixed.addFeatures(vsStrategyFixed.readFeatures(response));
};
// Vector layer
var vectorLayerFixed = new ol.layer.Vector({
source: vsStrategyFixed,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 2
})
})
});
// Map
var mapFixed = new ol.Map({
target: 'mapFixed',
renderer: 'canvas',
layers: [osmLayer, vectorLayerFixed],
view: new ol.View({
center: ol.proj.transform([-75.923853, 45.428736], 'EPSG:4326', 'EPSG:3857'),
maxZoom: 19,
zoom: 10
})
});
// Source using a bbox strategy
var vsStrategyBbox = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'http://demo.opengeo.org/geoserver/wfs?'+
'service=WFS&request=GetFeature&'+
'version=1.1.0&typename=osm:water_areas&'+
'outputFormat=text/javascript&'+
'format_options=callback:loadFeaturesBbox&' +
'srsname=EPSG:3857&bbox=' + extent.join(',');
$.ajax({
url: url,
dataType: 'jsonp'
});
},
strategy: ol.loadingstrategy.bbox,
projection: 'EPSG:3857'
});
// Executed when data is loaded by the $.ajax method.
var loadFeaturesBbox = function(response) {
vsStrategyBbox.addFeatures(vsStrategyBbox.readFeatures(response));
};
// Vector layer
var vectorLayerBbox = new ol.layer.Vector({
source: vsStrategyBbox,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 2
})
})
});
// Map
var mapBbox = new ol.Map({
target: 'mapBbox',
renderer: 'canvas',
layers: [osmLayer, vectorLayerBbox],
view: new ol.View({
center: ol.proj.transform([-75.923853, 45.428736], 'EPSG:4326', 'EPSG:3857'),
maxZoom: 19,
zoom: 10
})
});