Merge pull request #3986 from alvinlindstam/feature/url-function

Modify 'url' option of ol.source.Vector to accept a function

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

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) {
+  format: new ol.format.GeoJSON(),
-    var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
+  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' +
+        'outputFormat=application/json&srsname=EPSG:3857&' +
-        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',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});
   },
   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({

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
+ * {@link ol.featureloader.xhr}). Use a `string` and an
- * one-off download of all features from that URL.
+ * {@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;

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.<ol.Feature>)} 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

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';
+      url = 'spec/ol/data/point.json';
-      var format = new ol.format.GeoJSON();
+      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');
+      });
+    });
+
   });
 });