diff --git a/examples/vector-osm.js b/examples/vector-osm.js index 30526090f5..86f0c02181 100644 --- a/examples/vector-osm.js +++ b/examples/vector-osm.js @@ -87,19 +87,13 @@ var styles = { } }; -var osmxmlFormat = new ol.format.OSMXML(); - var vectorSource = new ol.source.Vector({ - loader: function(extent, resolution, projection) { + format: new ol.format.OSMXML(), + url: function(extent, resolution, projection) { var epsg4326Extent = ol.proj.transformExtent(extent, projection, 'EPSG:4326'); - var url = 'http://overpass-api.de/api/xapi?map?bbox=' + + return 'http://overpass-api.de/api/xapi?map?bbox=' + epsg4326Extent.join(','); - $.ajax(url).then(function(response) { - var features = osmxmlFormat.readFeatures(response, - {featureProjection: projection}); - vectorSource.addFeatures(features); - }); }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ maxZoom: 19 diff --git a/examples/vector-wfs.js b/examples/vector-wfs.js index 3b3d9470b4..eb9bede9e4 100644 --- a/examples/vector-wfs.js +++ b/examples/vector-wfs.js @@ -10,18 +10,14 @@ goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); -// format used to parse WFS GetFeature responses -var geojsonFormat = new ol.format.GeoJSON(); var vectorSource = new ol.source.Vector({ - loader: function(extent, resolution, projection) { - var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' + + format: new ol.format.GeoJSON(), + url: function(extent, resolution, projection) { + return 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' + 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + - 'outputFormat=text/javascript&format_options=callback:loadFeatures' + - '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857'; - // use jsonp: false to prevent jQuery from adding the "callback" - // parameter to the URL - $.ajax({url: url, dataType: 'jsonp', jsonp: false}); + 'outputFormat=application/json&srsname=EPSG:3857&' + + 'bbox=' + extent.join(',') + ',EPSG:3857'; }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ maxZoom: 19 @@ -29,14 +25,6 @@ var vectorSource = new ol.source.Vector({ }); -/** - * JSONP WFS callback function. - * @param {Object} response The response object. - */ -window.loadFeatures = function(response) { - vectorSource.addFeatures(geojsonFormat.readFeatures(response)); -}; - var vector = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ diff --git a/externs/olx.js b/externs/olx.js index 343a750975..b54c279332 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -5195,7 +5195,7 @@ olx.source.TileWMSOptions.prototype.wrapX; * loader: (ol.FeatureLoader|undefined), * logo: (string|olx.LogoOptions|undefined), * strategy: (ol.LoadingStrategy|undefined), - * url: (string|undefined), + * url: (string|ol.FeatureUrlFunction|undefined), * useSpatialIndex: (boolean|undefined), * wrapX: (boolean|undefined)}} * @api @@ -5258,10 +5258,12 @@ olx.source.VectorOptions.prototype.strategy; /** * Setting this option instructs the source to use an XHR loader (see - * {@link ol.featureloader.xhr}) and an {@link ol.loadingstrategy.all} for a - * one-off download of all features from that URL. + * {@link ol.featureloader.xhr}). Use a `string` and an + * {@link ol.loadingstrategy.all} for a one-off download of all features from + * the given URL. Use a {@link ol.FeatureUrlFunction} to generate the url with + * other loading strategies. * Requires `format` to be set as well. - * @type {string|undefined} + * @type {string|ol.FeatureUrlFunction|undefined} * @api */ olx.source.VectorOptions.prototype.url; diff --git a/src/ol/featureloader.js b/src/ol/featureloader.js index f760ac4600..4dbbfec3dc 100644 --- a/src/ol/featureloader.js +++ b/src/ol/featureloader.js @@ -1,4 +1,5 @@ goog.provide('ol.FeatureLoader'); +goog.provide('ol.FeatureUrlFunction'); goog.provide('ol.featureloader'); goog.require('goog.asserts'); @@ -11,6 +12,16 @@ goog.require('ol.xml'); /** + * {@link ol.source.Vector} sources use a function of this type to load + * features. + * + * This function takes an {@link ol.Extent} representing the area to be loaded, + * a `{number}` representing the resolution (map units per pixel) and an + * {@link ol.proj.Projection} for the projection as arguments. `this` within + * the function is bound to the {@link ol.source.Vector} it's called from. + * + * The function is responsible for loading the features and adding them to the + * source. * @api * @typedef {function(this:ol.source.Vector, ol.Extent, number, * ol.proj.Projection)} @@ -19,7 +30,21 @@ ol.FeatureLoader; /** - * @param {string} url Feature URL service. + * {@link ol.source.Vector} sources use a function of this type to get the url + * to load features from. + * + * This function takes an {@link ol.Extent} representing the area to be loaded, + * a `{number}` representing the resolution (map units per pixel) and an + * {@link ol.proj.Projection} for the projection as arguments and returns a + * `{string}` representing the URL. + * @api + * @typedef {function(ol.Extent, number, ol.proj.Projection) : string} + */ +ol.FeatureUrlFunction; + + +/** + * @param {string|ol.FeatureUrlFunction} url Feature URL service. * @param {ol.format.Feature} format Feature format. * @param {function(this:ol.source.Vector, Array.)} success * Function called with the loaded features. Called with the vector @@ -77,7 +102,12 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success) { } goog.dispose(xhrIo); }, false, this); - xhrIo.send(url); + if (goog.isFunction(url)) { + xhrIo.send(url(extent, resolution, projection)); + } else { + xhrIo.send(url); + } + }); }; @@ -86,7 +116,7 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success) { * Create an XHR feature loader for a `url` and `format`. The feature loader * loads features (with XHR), parses the features, and adds them to the * vector source. - * @param {string} url Feature URL service. + * @param {string|ol.FeatureUrlFunction} url Feature URL service. * @param {ol.format.Feature} format Feature format. * @return {ol.FeatureLoader} The feature loader. * @api diff --git a/test/spec/ol/featureloader.test.js b/test/spec/ol/featureloader.test.js index 6ce714c98e..f9be87a4dc 100644 --- a/test/spec/ol/featureloader.test.js +++ b/test/spec/ol/featureloader.test.js @@ -4,16 +4,18 @@ describe('ol.featureloader', function() { describe('ol.featureloader.xhr', function() { var loader; var source; + var url; + var format; beforeEach(function() { - var url = 'spec/ol/data/point.json'; - var format = new ol.format.GeoJSON(); + url = 'spec/ol/data/point.json'; + format = new ol.format.GeoJSON(); - loader = ol.featureloader.xhr(url, format); source = new ol.source.Vector(); }); it('adds features to the source', function(done) { + loader = ol.featureloader.xhr(url, format); source.on(ol.source.VectorEventType.ADDFEATURE, function(e) { expect(source.getFeatures().length).to.be.greaterThan(0); done(); @@ -21,6 +23,35 @@ describe('ol.featureloader', function() { loader.call(source, [], 1, 'EPSG:3857'); }); + describe('when called with urlFunction', function() { + it('adds features to the source', function(done) { + url = function(extent, resolution, projection) { + return 'spec/ol/data/point.json';}; + loader = ol.featureloader.xhr(url, format); + + source.on(ol.source.VectorEventType.ADDFEATURE, function(e) { + expect(source.getFeatures().length).to.be.greaterThan(0); + done(); + }); + loader.call(source, [], 1, 'EPSG:3857'); + }); + + it('sends the correct arguments to the urlFunction', function(done) { + var extent = []; + var resolution = 1; + var projection = 'EPSG:3857'; + url = function(extent_, resolution_, projection_) { + expect(extent_).to.eql(extent); + expect(resolution_).to.eql(resolution); + expect(projection_).to.eql(projection); + done(); + return 'spec/ol/data/point.json'; + }; + loader = ol.featureloader.xhr(url, format); + loader.call(source, [], 1, 'EPSG:3857'); + }); + }); + }); });