[ol.layer.TileLayer] getTileUrl should be implemented in subclasses

src/ol/layer/TileLayer.js

@@ -104,6 +104,24 @@ ol.layer.TileLayer = function() {
 
 goog.inherits(ol.layer.TileLayer, ol.layer.Layer);
 
+/**
+ * @protected
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @return {string}
+ */
+ol.layer.TileLayer.prototype.getTileUrl = function(x, y, z) {
+    // overridden by subclasses
+};
+
+/**
+ * @return {string|undefined} The layer URL.
+ */
+ol.layer.TileLayer.prototype.getUrl = function() {
+    return this.url_;
+};
+
 /**
  * @return {boolean} The tile index increases from left to right.
  */
@@ -332,24 +350,11 @@ ol.layer.TileLayer.prototype.getTile = function(url, bounds) {
  * @param {number} z
  */
 ol.layer.TileLayer.prototype.getTileForXYZ = function(x, y, z) {
-    var url = this.url_.replace('{x}', x + '')
+    var tileUrl = this.getTileUrl(x, y, z);
-                       .replace('{y}', y + '')
+    var tile = this.cache_.get(tileUrl);
-                       .replace('{z}', z + '');
-    var tile = this.cache_.get(url);
     if (!goog.isDef(tile)) {
-        var tileOrigin = this.getTileOrigin(),
+        tile = new this.Tile(tileUrl);
-            tileOriginX = tileOrigin[0],
+        this.cache_.set(tileUrl, tile);
-            tileOriginY = tileOrigin[1];
-        var resolution = this.getResolutions()[z];
-        var tileWidth = this.tileWidth_ * resolution,
-            tileHeight = this.tileHeight_ * resolution;
-        var minX = tileOriginX + (x * tileWidth),
-            minY = tileOriginY - (y * tileHeight),
-            maxX = minX + tileWidth,
-            maxY = minY + tileHeight;
-        var tileBounds = new ol.Bounds(minX, minY, maxX, maxY);
-        tile = new this.Tile(url, tileBounds);
-        this.cache_.set(tile.getUrl(), tile);
     }
     return tile;
 };
@@ -370,17 +375,15 @@ ol.layer.TileLayer.prototype.getData = function(bounds, resolution) {
         boundsMaxX = bounds.getMaxX(),
         boundsMinY = bounds.getMinY(),
         boundsMaxY = bounds.getMaxY(),
-
         tileWidth = me.tileWidth_,
         tileHeight = me.tileHeight_,
-
         tileOrigin = me.getTileOrigin(),
         tileOriginX = tileOrigin[0],
         tileOriginY = tileOrigin[1],
-
         tileWidthGeo = tileWidth * resolution,
         tileHeightGeo = tileHeight * resolution;
 
+    // make sure we don't create tiles outside the layer extent
     var extent = this.getExtent();
     if (extent) {
         boundsMinX = Math.max(boundsMinX, extent.getMinX());
@@ -410,9 +413,7 @@ ol.layer.TileLayer.prototype.getData = function(bounds, resolution) {
             tileRight = tileLeft + tileWidthGeo;
             tileBounds = new ol.Bounds(tileLeft, tileBottom,
                                        tileRight, tileTop, this.projection_);
-            url = me.url_.replace('{x}', offsetX + x + '')
+            url = this.getTileUrl(offsetX + x, offsetY + y, zoom);
-                         .replace('{y}', offsetY + y + '')
-                         .replace('{z}', zoom + '');
             tile = this.getTile(url, tileBounds);
             tiles[y][x] = tile;
         }

src/ol/layer/XYZ.js

@@ -24,3 +24,12 @@ ol.layer.XYZ = function(url) {
 
 goog.inherits(ol.layer.XYZ, ol.layer.TileLayer);
 
+/**
+ * @inheritDoc
+ */
+ol.layer.XYZ.prototype.getTileUrl = function(x, y, z) {
+    var base = this.getUrl();
+    return base.replace('{x}', x + '')
+               .replace('{y}', y + '')
+               .replace('{z}', z + '');
+};

test/spec/ol/layer/TileLayer.test.js

@@ -208,6 +208,13 @@ describe('ol.layer.TileLayer', function() {
             layer.setResolutions([1, 0.5, 0.25]);
             layer.setTileOrigin(-128, 128);
             layer.setExtent(new ol.Bounds(-128, -128, 128, 128));
+            // we need a TileLayer implementation, just
+            // use duck-typing on the layer instance
+            layer.getTileUrl = function(x, y, z) {
+                return this.getUrl().replace('{x}', x + '')
+                                    .replace('{y}', y + '')
+                                    .replace('{z}', z + '');
+            };
         });
 
         describe('extent -128,-128,128,128, resolution 1', function() {
@@ -375,16 +382,18 @@ describe('ol.layer.TileLayer', function() {
             layer.setUrl('/{z}/{x}/{y}');
             layer.setResolutions([1, 0.5, 0.25]);
             layer.setTileOrigin(-128, 128);
+            // we need a TileLayer implementation, just
+            // use duck-typing on the layer instance
+            layer.getTileUrl = function(x, y, z) {
+                return this.getUrl().replace('{x}', x + '')
+                                    .replace('{y}', y + '')
+                                    .replace('{z}', z + '');
+            };
         });
 
         it('returns the expected tile', function() {
             var tile = layer.getTileForXYZ(1, 2, 2);
             expect(tile.getUrl()).toEqual('/2/1/2');
-            //var bounds = tile.getBounds();
-            //expect(bounds.getMinX()).toEqual(-64);
-            //expect(bounds.getMinY()).toEqual(0);
-            //expect(bounds.getMaxX()).toEqual(0);
-            //expect(bounds.getMaxY()).toEqual(64);
         });
 
     });