Support tile sources without configured projection

This change adds a lot of flexibility to working with tile
layers: Sources where the server projection or tile grid do not
matter can now be constructed without specifying a projection or
tile grid.

The tileUrlFunction/imageUrlFunction now also creates updated
URLs when the params of the layer change, so things like
mergeNewParams in ol2 will be possible.

A nice side effect of this whole change is that there is no more
duplicated code between tiled and single image WMS layers.

While I was at it, I also fixed a WMS 1.1.1 axis order issue
and incorrect STYLES params (STYLES=& instead of STYLES&).

src/ol/source/imagesource.js

@@ -76,12 +76,13 @@ goog.inherits(ol.source.ImageSource, ol.source.Source);
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
  * @param {ol.Size} size Size.
+ * @param {ol.Projection} projection Projection.
  * @return {ol.Image} Single image.
  */
 ol.source.ImageSource.prototype.createImage =
-    function(extent, resolution, size) {
+    function(extent, resolution, size, projection) {
   var image = null;
-  var imageUrl = this.imageUrlFunction(extent, size);
+  var imageUrl = this.imageUrlFunction(extent, size, projection);
   if (goog.isDef(imageUrl)) {
     image = new ol.Image(
         extent, resolution, imageUrl, this.crossOrigin_,
@@ -109,6 +110,7 @@ ol.source.ImageSource.prototype.findNearestResolution =
 /**
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
+ * @param {ol.Projection} projection Projection.
  * @return {ol.Image} Single image.
  */
 ol.source.ImageSource.prototype.getImage = goog.abstractMethod;

src/ol/source/imagetilesource.js

@@ -7,7 +7,6 @@ goog.require('ol.ImageTile');
 goog.require('ol.Projection');
 goog.require('ol.Tile');
 goog.require('ol.TileCache');
-goog.require('ol.TileCoord');
 goog.require('ol.TileUrlFunction');
 goog.require('ol.TileUrlFunctionType');
 goog.require('ol.source.TileSource');
@@ -84,12 +83,15 @@ ol.source.ImageTileSource.prototype.expireCache = function(usedTiles) {
 /**
  * @inheritDoc
  */
-ol.source.ImageTileSource.prototype.getTile = function(tileCoord) {
+ol.source.ImageTileSource.prototype.getTile =
+    function(tileCoord, tileGrid, projection) {
   var key = tileCoord.toString();
   if (this.tileCache_.containsKey(key)) {
     return /** @type {ol.Tile} */ (this.tileCache_.get(key));
   } else {
-    var tileUrl = this.getTileCoordUrl(tileCoord);
+    goog.asserts.assert(tileGrid);
+    goog.asserts.assert(projection);
+    var tileUrl = this.tileUrlFunction(tileCoord, tileGrid, projection);
     var tile;
     if (goog.isDef(tileUrl)) {
       tile = new ol.ImageTile(tileCoord, tileUrl, this.crossOrigin_);
@@ -102,15 +104,6 @@ ol.source.ImageTileSource.prototype.getTile = function(tileCoord) {
 };
 
 
-/**
- * @param {ol.TileCoord} tileCoord Tile coordinate.
- * @return {string|undefined} Tile URL.
- */
-ol.source.ImageTileSource.prototype.getTileCoordUrl = function(tileCoord) {
-  return this.tileUrlFunction(tileCoord);
-};
-
-
 /**
  * @inheritDoc
  */

src/ol/source/singleimagewmssource.js

@@ -1,11 +1,9 @@
 goog.provide('ol.source.SingleImageWMS');
 
-goog.require('goog.uri.utils');
 goog.require('ol.Extent');
 goog.require('ol.Image');
 goog.require('ol.ImageUrlFunction');
 goog.require('ol.Size');
-goog.require('ol.projection');
 goog.require('ol.source.ImageSource');
 
 
@@ -16,45 +14,16 @@ goog.require('ol.source.ImageSource');
  * @param {ol.source.SingleImageWMSOptions} options Options.
  */
 ol.source.SingleImageWMS = function(options) {
-
-  var projection = ol.projection.createProjection(
-      options.projection, 'EPSG:3857');
-  var projectionExtent = projection.getExtent();
-
-  var extent = goog.isDef(options.extent) ?
-      options.extent : projectionExtent;
-
-  var version = goog.isDef(options.version) ?
-      options.version : '1.3';
-
-  var baseParams = {
-    'SERVICE': 'WMS',
-    'VERSION': version,
-    'REQUEST': 'GetMap',
-    'STYLES': '',
-    'FORMAT': 'image/png',
-    'TRANSPARENT': true
-  };
-  baseParams[version >= '1.3' ? 'CRS' : 'SRS'] = projection.getCode();
-  goog.object.extend(baseParams, options.params);
-
-  var axisOrientation = projection.getAxisOrientation();
-  var imageUrlFunction;
-  if (options.url) {
-    var url = goog.uri.utils.appendParamsFromMap(
-        options.url, baseParams);
-    imageUrlFunction =
-        ol.ImageUrlFunction.createBboxParam(url, axisOrientation);
-  } else {
-    imageUrlFunction =
-        ol.ImageUrlFunction.nullImageUrlFunction;
-  }
+  var imageUrlFunction = goog.isDef(options.url) ?
+      ol.ImageUrlFunction.createWMSParams(
+          options.url, options.params, options.version) :
+      ol.ImageUrlFunction.nullImageUrlFunction;
 
   goog.base(this, {
     attributions: options.attributions,
     crossOrigin: options.crossOrigin,
-    extent: extent,
-    projection: projection,
+    extent: options.extent,
+    projection: options.projection,
     resolutions: options.resolutions,
     imageUrlFunction: imageUrlFunction
   });
@@ -80,7 +49,7 @@ goog.inherits(ol.source.SingleImageWMS, ol.source.ImageSource);
  * @inheritDoc
  */
 ol.source.SingleImageWMS.prototype.getImage =
-    function(extent, resolution) {
+    function(extent, resolution, projection) {
   resolution = this.findNearestResolution(resolution);
 
   var image = this.image_;
@@ -97,6 +66,6 @@ ol.source.SingleImageWMS.prototype.getImage =
   var height = extent.getHeight() / resolution;
   var size = new ol.Size(width, height);
 
-  this.image_ = this.createImage(extent, resolution, size);
+  this.image_ = this.createImage(extent, resolution, size, projection);
   return this.image_;
 };

src/ol/source/source.js

@@ -38,7 +38,8 @@ ol.source.Source = function(sourceOptions) {
    * @type {ol.Extent}
    */
   this.extent_ = goog.isDef(sourceOptions.extent) ?
-      sourceOptions.extent : sourceOptions.projection.getExtent();
+      sourceOptions.extent : goog.isDef(sourceOptions.projection) ?
+          sourceOptions.projection.getExtent() : null;
 
   /**
    * @private

src/ol/source/staticimagesource.js

@@ -19,6 +19,7 @@ ol.source.StaticImage = function(options) {
   var imageExtent = options.imageExtent;
   var imageSize = options.imageSize;
   var imageResolution = imageExtent.getHeight() / imageSize.height;
+  var projection = goog.isDef(options.projection) ? options.projection : null;
 
   goog.base(this, {
     attributions: options.attributions,
@@ -33,7 +34,8 @@ ol.source.StaticImage = function(options) {
    * @private
    * @type {ol.Image}
    */
-  this.image_ = this.createImage(imageExtent, imageResolution, imageSize);
+  this.image_ = this.createImage(
+      imageExtent, imageResolution, imageSize, projection);
 
 };
 goog.inherits(ol.source.StaticImage, ol.source.ImageSource);
@@ -42,7 +44,8 @@ goog.inherits(ol.source.StaticImage, ol.source.ImageSource);
 /**
  * @inheritDoc
  */
-ol.source.StaticImage.prototype.getImage = function(extent, resolution) {
+ol.source.StaticImage.prototype.getImage =
+    function(extent, resolution, projection) {
   if (extent.intersects(this.image_.getExtent())) {
     return this.image_;
   }
@@ -55,7 +58,7 @@ ol.source.StaticImage.prototype.getImage = function(extent, resolution) {
  * @return {ol.ImageUrlFunctionType} Function.
  */
 ol.source.StaticImage.createImageFunction = function(url) {
-  return function(extent, size) {
+  return function(extent, size, projection) {
     return url;
   };
 };

src/ol/source/tiledwmssource.js

@@ -4,12 +4,9 @@ goog.provide('ol.source.TiledWMS');
 
 
 goog.require('goog.array');
-goog.require('goog.object');
-goog.require('goog.uri.utils');
 goog.require('ol.Extent');
 goog.require('ol.TileCoord');
 goog.require('ol.TileUrlFunction');
-goog.require('ol.projection');
 goog.require('ol.source.ImageTileSource');
 
 
@@ -20,64 +17,40 @@ goog.require('ol.source.ImageTileSource');
  * @param {ol.source.TiledWMSOptions} tiledWMSOptions options.
  */
 ol.source.TiledWMS = function(tiledWMSOptions) {
-  var projection = ol.projection.createProjection(
-      tiledWMSOptions.projection, 'EPSG:3857');
-  var projectionExtent = projection.getExtent();
-
-  var extent = goog.isDef(tiledWMSOptions.extent) ?
-      tiledWMSOptions.extent : projectionExtent;
-
-  var version = goog.isDef(tiledWMSOptions.version) ?
-      tiledWMSOptions.version : '1.3';
-
   var tileGrid;
   if (goog.isDef(tiledWMSOptions.tileGrid)) {
     tileGrid = tiledWMSOptions.tileGrid;
-  } else {
-    tileGrid = ol.tilegrid.createForProjection(projection,
-        tiledWMSOptions.maxZoom);
   }
+  var version = tiledWMSOptions.version;
 
-  var baseParams = {
-    'SERVICE': 'WMS',
-    'VERSION': version,
-    'REQUEST': 'GetMap',
-    'STYLES': '',
-    'FORMAT': 'image/png',
-    'TRANSPARENT': true
-  };
-  baseParams[version >= '1.3' ? 'CRS' : 'SRS'] = projection.getCode();
-  goog.object.extend(baseParams, tiledWMSOptions.params);
-
-  var axisOrientation = projection.getAxisOrientation();
   var tileUrlFunction;
   if (tiledWMSOptions.urls) {
     var tileUrlFunctions = goog.array.map(
         tiledWMSOptions.urls, function(url) {
-          url = goog.uri.utils.appendParamsFromMap(url, baseParams);
-          return ol.TileUrlFunction.createBboxParam(
-              url, tileGrid, axisOrientation);
+          return ol.TileUrlFunction.createWMSParams(
+              url, tiledWMSOptions.params, version);
         });
     tileUrlFunction = ol.TileUrlFunction.createFromTileUrlFunctions(
         tileUrlFunctions);
   } else if (tiledWMSOptions.url) {
-    var url = goog.uri.utils.appendParamsFromMap(
-        tiledWMSOptions.url, baseParams);
-    tileUrlFunction =
-        ol.TileUrlFunction.createBboxParam(url, tileGrid, axisOrientation);
+    tileUrlFunction = ol.TileUrlFunction.createWMSParams(
+        tiledWMSOptions.url, tiledWMSOptions.params, version);
   } else {
     tileUrlFunction = ol.TileUrlFunction.nullTileUrlFunction;
   }
 
-  var tileCoordTransform = function(tileCoord) {
+  var extent = tiledWMSOptions.extent;
+
+  var tileCoordTransform = function(tileCoord, tileGrid, projection) {
     if (tileGrid.getResolutions().length <= tileCoord.z) {
       return null;
     }
     var x = tileCoord.x;
     var tileExtent = tileGrid.getTileCoordExtent(tileCoord);
+    var projectionExtent = projection.getExtent();
     // FIXME do we want a wrapDateLine param? The code below will break maps
     // with projections that do not span the whole world width.
-    if (extent.minX === projectionExtent.minX &&
+    if (extent && extent.minX === projectionExtent.minX &&
         extent.maxX === projectionExtent.maxX) {
       var numCols = Math.ceil(
           (extent.maxX - extent.minX) / (tileExtent.maxX - tileExtent.minX));
@@ -96,8 +69,8 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
     attributions: tiledWMSOptions.attributions,
     crossOrigin: tiledWMSOptions.crossOrigin,
     extent: extent,
-    tileGrid: tileGrid,
-    projection: projection,
+    tileGrid: tiledWMSOptions.tileGrid,
+    projection: tiledWMSOptions.projection,
     tileUrlFunction: ol.TileUrlFunction.withTileCoordTransform(
         tileCoordTransform, tileUrlFunction)
   });

src/ol/source/tilesource.js

@@ -65,14 +65,14 @@ ol.source.TileSource.prototype.expireCache = goog.abstractMethod;
  *
  * @param {Object.<number, Object.<string, ol.Tile>>} loadedTilesByZ A lookup of
  *     loaded tiles by zoom level.
- * @param {function(ol.Tile): boolean} isLoaded A function to determine if a
- *     tile is fully loaded.
+ * @param {function(ol.TileCoord): ol.Tile} getTileIfLoaded A function that
+ *     returns the tile only if it is fully loaded.
  * @param {number} z Zoom level.
  * @param {ol.TileRange} tileRange Tile range.
  * @return {boolean} The tile range is fully covered with loaded tiles.
  */
 ol.source.TileSource.prototype.findLoadedTiles = function(loadedTilesByZ,
-    isLoaded, z, tileRange) {
+    getTileIfLoaded, z, tileRange) {
   // FIXME this could be more efficient about filling partial holes
   var fullyCovered = true;
   var tile, tileCoord, tileCoordKey, x, y;
@@ -83,8 +83,8 @@ ol.source.TileSource.prototype.findLoadedTiles = function(loadedTilesByZ,
       if (loadedTilesByZ[z] && loadedTilesByZ[z][tileCoordKey]) {
         continue;
       }
-      tile = this.getTile(tileCoord);
-      if (isLoaded(tile)) {
+      tile = getTileIfLoaded(tileCoord);
+      if (!goog.isNull(tile)) {
         if (!loadedTilesByZ[z]) {
           loadedTilesByZ[z] = {};
         }
@@ -108,6 +108,8 @@ ol.source.TileSource.prototype.getResolutions = function() {
 
 /**
  * @param {ol.TileCoord} tileCoord Tile coordinate.
+ * @param {ol.tilegrid.TileGrid=} opt_tileGrid Tile grid.
+ * @param {ol.Projection=} opt_projection Projection.
  * @return {ol.Tile} Tile.
  */
 ol.source.TileSource.prototype.getTile = goog.abstractMethod;
@@ -124,9 +126,10 @@ ol.source.TileSource.prototype.getTileGrid = function() {
 /**
  * @param {number} z Z.
  * @param {ol.Extent} extent Extent.
+ * @param {ol.tilegrid.TileGrid} tileGrid Tile grid.
  */
-ol.source.TileSource.prototype.useLowResolutionTiles = function(z, extent) {
-  var tileGrid = this.getTileGrid();
+ol.source.TileSource.prototype.useLowResolutionTiles =
+    function(z, extent, tileGrid) {
   var tileRange, x, y, zKey;
   // FIXME this should loop up to tileGrid's minZ when implemented
   for (; z >= 0; --z) {

src/ol/source/wms.js

@@ -0,0 +1,37 @@
+goog.provide('ol.source.wms');
+
+
+/**
+ * @param {string} baseUrl WMS base url.
+ * @param {Object.<string, string|number>} params Request parameters.
+ * @param {ol.Extent} extent Extent.
+ * @param {ol.Size} size Size.
+ * @param {ol.Projection} projection Projection.
+ * @param {string=} opt_version WMS version. Default is '1.3.0'.
+ * @return {string} WMS GetMap request URL.
+ */
+ol.source.wms.getUrl =
+    function(baseUrl, params, extent, size, projection, opt_version) {
+  var version = goog.isDef(opt_version) ? opt_version : '1.3.0';
+  var wms13 = version >= '1.3';
+  var axisOrientation = projection.getAxisOrientation();
+  var bboxValues = (wms13 && axisOrientation.substr(0, 2) == 'ne') ?
+      [extent.minY, extent.minX, extent.maxY, extent.maxX] :
+      [extent.minX, extent.minY, extent.maxX, extent.maxY];
+  var baseParams = {
+    'SERVICE': 'WMS',
+    'VERSION': version,
+    'REQUEST': 'GetMap',
+    'FORMAT': 'image/png',
+    'TRANSPARENT': true,
+    'WIDTH': size.width,
+    'HEIGHT': size.height,
+    'BBOX': bboxValues.join(',')
+  };
+  goog.object.extend(baseParams, params);
+  baseParams[wms13 ? 'CRS' : 'SRS'] = projection.getCode();
+  //TODO: Provide our own appendParams function to avoid this empty string hack
+  var stylesParam = 'STYLES';
+  baseParams[stylesParam] = params[stylesParam] || new String('');
+  return goog.uri.utils.appendParamsFromMap(baseUrl, baseParams);
+};