Use an url template for ol.source.Zoomify

changelog/upgrade-notes.md

@@ -2,6 +2,32 @@
 
 ### Next release
 
+#### `ol.source.Zoomify` `url` is now a template
+
+The `url` for the `ol.source.Zoomify` source is now a template.  The `{x}`, `{y}`, `{z}` and `{TileGroup}` placeholders
+must be included in the `url`.
+
+If you had:
+```js
+new ol.source.Zoomify({
+  url: 'https://www.example.com/cgi-bin/iipsrv.fcgi?zoomify=/a/b/'
+});
+
+```
+It needs to be changed to:
+```js
+new ol.source.Zoomify({
+  url: 'https://www.example.com/cgi-bin/iipsrv.fcgi?zoomify=/a/b/{TileGroup}/{z}-{x}-{y}.jpg'
+});
+```
+
+And the `url` can now include subdomains:
+```js
+new ol.source.Zoomify({
+  url: 'https://{a-f}.example.com/cgi-bin/iipsrv.fcgi?zoomify=/a/b/{TileGroup}/{z}-{x}-{y}.jpg'
+});
+```
+
 #### Removal of deprecated methods
 
 The deprecated `ol.animation` functions and `map.beforeRender()` method have been removed.  Use `view.animate()` instead.

examples/zoomify.js

@@ -8,7 +8,7 @@ var imgHeight = 6100;
 
 var source = new ol.source.Zoomify({
   url: 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
-      '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/',
+      '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/{TileGroup}/{z}-{x}-{y}.jpg',
   size: [imgWidth, imgHeight],
   crossOrigin: 'anonymous'
 });

externs/olx.js

@@ -6759,7 +6759,9 @@ olx.source.ZoomifyOptions.prototype.reprojectionErrorThreshold;
 
 
 /**
- * Prefix of URL template.
+ * URL template. Must include `{x}`, `{y}`, `{z}` and `{TileGroup}` placeholders.
+ * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
+ * used instead of defining each one separately in the `urls` option.
  * @type {!string}
  * @api
  */

src/ol/source/zoomify.js

@@ -3,6 +3,7 @@ goog.provide('ol.source.Zoomify');
 goog.require('ol');
 goog.require('ol.ImageTile');
 goog.require('ol.TileState');
+goog.require('ol.TileUrlFunction');
 goog.require('ol.asserts');
 goog.require('ol.dom');
 goog.require('ol.extent');
@@ -82,16 +83,22 @@ ol.source.Zoomify = function(opt_options) {
     resolutions: resolutions
   });
 
-  var url = options.url;
+  var urls = ol.TileUrlFunction.expandUrl(options.url);
 
   /**
-   * @this {ol.source.TileImage}
+   * @param {string} template Template.
+   * @return {ol.TileUrlFunctionType} Tile URL function.
+   */
+  function createFromTemplate(template) {
+
+    return (
+      /**
        * @param {ol.TileCoord} tileCoord Tile Coordinate.
        * @param {number} pixelRatio Pixel ratio.
        * @param {ol.proj.Projection} projection Projection.
        * @return {string|undefined} Tile URL.
        */
-  function tileUrlFunction(tileCoord, pixelRatio, projection) {
+      function(tileCoord, pixelRatio, projection) {
         if (!tileCoord) {
           return undefined;
         } else {
@@ -103,11 +110,21 @@ ol.source.Zoomify = function(opt_options) {
               tileCoordY * tierSizeInTiles[tileCoordZ][0] +
               tileCountUpToTier[tileCoordZ];
           var tileGroup = (tileIndex / ol.DEFAULT_TILE_SIZE) | 0;
-      return url + 'TileGroup' + tileGroup + '/' +
+          var localContext = {
-          tileCoordZ + '-' + tileCoordX + '-' + tileCoordY + '.jpg';
+            'z': tileCoordZ,
+            'x': tileCoordX,
+            'y': tileCoordY,
+            'TileGroup': 'TileGroup' + tileGroup
+          };
+          return template.replace(/\{(\w+?)\}/g, function(m, p) {
+            return localContext[p];
+          });
         }
+      });
   }
 
+  var tileUrlFunction = ol.TileUrlFunction.createFromTileUrlFunctions(urls.map(createFromTemplate));
+
   ol.source.TileImage.call(this, {
     attributions: options.attributions,
     cacheSize: options.cacheSize,

test/spec/ol/source/zoomify.test.js

@@ -11,7 +11,7 @@ describe('ol.source.Zoomify', function() {
   var w = 1024;
   var h = 512;
   var size = [w, h];
-  var url = 'zoomify-url/';
+  var url = 'zoomify-url/{TileGroup}/{z}-{x}-{y}.jpg';
   var proj = new ol.proj.Projection({
     code: 'ZOOMIFY',
     units: 'pixels',