diff --git a/externs/olx.js b/externs/olx.js index e83a92d11b..29b2800488 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -7233,7 +7233,8 @@ olx.source.CartoDBOptions.prototype.account; * url: !string, * tierSizeCalculation: (string|undefined), * size: ol.Size, - * transition: (number|undefined)}} + * transition: (number|undefined), + * tileSize: (number|undefined)}} */ olx.source.ZoomifyOptions; @@ -7333,6 +7334,15 @@ olx.source.ZoomifyOptions.prototype.size; olx.source.ZoomifyOptions.prototype.transition; +/** + * Tile size. Same tile size is used for all zoom levels. Default value is + * `OpenLayers.DEFAULT_TILE_SIZE`. + * @type {number|undefined} + * @api + */ +olx.source.ZoomifyOptions.prototype.tileSize; + + /** * Namespace. * @type {Object} diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index 467f8aee79..0eddae086c 100644 --- a/src/ol/source/zoomify.js +++ b/src/ol/source/zoomify.js @@ -7,6 +7,7 @@ goog.require('ol.TileUrlFunction'); goog.require('ol.asserts'); goog.require('ol.dom'); goog.require('ol.extent'); +goog.require('ol.size'); goog.require('ol.source.TileImage'); goog.require('ol.tilegrid.TileGrid'); @@ -33,25 +34,26 @@ ol.source.Zoomify = function(opt_options) { var imageWidth = size[0]; var imageHeight = size[1]; var tierSizeInTiles = []; - var tileSize = ol.DEFAULT_TILE_SIZE; + var tileSize = options.tileSize || ol.DEFAULT_TILE_SIZE; + var tileSizeForTierSizeCalculation = tileSize; switch (tierSizeCalculation) { case ol.source.Zoomify.TierSizeCalculation_.DEFAULT: - while (imageWidth > tileSize || imageHeight > tileSize) { + while (imageWidth > tileSizeForTierSizeCalculation || imageHeight > tileSizeForTierSizeCalculation) { tierSizeInTiles.push([ - Math.ceil(imageWidth / tileSize), - Math.ceil(imageHeight / tileSize) + Math.ceil(imageWidth / tileSizeForTierSizeCalculation), + Math.ceil(imageHeight / tileSizeForTierSizeCalculation) ]); - tileSize += tileSize; + tileSizeForTierSizeCalculation += tileSizeForTierSizeCalculation; } break; case ol.source.Zoomify.TierSizeCalculation_.TRUNCATED: var width = imageWidth; var height = imageHeight; - while (width > tileSize || height > tileSize) { + while (width > tileSizeForTierSizeCalculation || height > tileSizeForTierSizeCalculation) { tierSizeInTiles.push([ - Math.ceil(width / tileSize), - Math.ceil(height / tileSize) + Math.ceil(width / tileSizeForTierSizeCalculation), + Math.ceil(height / tileSizeForTierSizeCalculation) ]); width >>= 1; height >>= 1; @@ -79,6 +81,7 @@ ol.source.Zoomify = function(opt_options) { var extent = [0, -size[1], size[0], 0]; var tileGrid = new ol.tilegrid.TileGrid({ + tileSize: tileSize, extent: extent, origin: ol.extent.getTopLeft(extent), resolutions: resolutions @@ -113,7 +116,8 @@ ol.source.Zoomify = function(opt_options) { var tileIndex = tileCoordX + tileCoordY * tierSizeInTiles[tileCoordZ][0]; - var tileGroup = ((tileIndex + tileCountUpToTier[tileCoordZ]) / ol.DEFAULT_TILE_SIZE) | 0; + var tileSize = tileGrid.getTileSize(tileCoordZ); + var tileGroup = ((tileIndex + tileCountUpToTier[tileCoordZ]) / tileSize) | 0; var localContext = { 'z': tileCoordZ, 'x': tileCoordX, @@ -130,6 +134,8 @@ ol.source.Zoomify = function(opt_options) { var tileUrlFunction = ol.TileUrlFunction.createFromTileUrlFunctions(urls.map(createFromTemplate)); + var ZoomifyTileClass = ol.source.Zoomify.Tile_.bind(null, tileGrid); + ol.source.TileImage.call(this, { attributions: options.attributions, cacheSize: options.cacheSize, @@ -137,7 +143,7 @@ ol.source.Zoomify = function(opt_options) { logo: options.logo, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - tileClass: ol.source.Zoomify.Tile_, + tileClass: ZoomifyTileClass, tileGrid: tileGrid, tileUrlFunction: tileUrlFunction, transition: options.transition @@ -146,10 +152,10 @@ ol.source.Zoomify = function(opt_options) { }; ol.inherits(ol.source.Zoomify, ol.source.TileImage); - /** * @constructor * @extends {ol.ImageTile} + * @param {ol.tilegrid.TileGrid} tileGrid TileGrid that the tile belongs to. * @param {ol.TileCoord} tileCoord Tile coordinate. * @param {ol.TileState} state State. * @param {string} src Image source URI. @@ -159,7 +165,7 @@ ol.inherits(ol.source.Zoomify, ol.source.TileImage); * @private */ ol.source.Zoomify.Tile_ = function( - tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { + tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options); @@ -169,6 +175,11 @@ ol.source.Zoomify.Tile_ = function( */ this.zoomifyImage_ = null; + /** + * @private + * @type {ol.Size} + */ + this.tileSize_ = ol.size.toSize(tileGrid.getTileSize(tileCoord[0])); }; ol.inherits(ol.source.Zoomify.Tile_, ol.ImageTile); @@ -180,14 +191,14 @@ ol.source.Zoomify.Tile_.prototype.getImage = function() { if (this.zoomifyImage_) { return this.zoomifyImage_; } - var tileSize = ol.DEFAULT_TILE_SIZE; var image = ol.ImageTile.prototype.getImage.call(this); if (this.state == ol.TileState.LOADED) { - if (image.width == tileSize && image.height == tileSize) { + var tileSize = this.tileSize_; + if (image.width == tileSize[0] && image.height == tileSize[1]) { this.zoomifyImage_ = image; return image; } else { - var context = ol.dom.createCanvasContext2D(tileSize, tileSize); + var context = ol.dom.createCanvasContext2D(tileSize[0], tileSize[1]); context.drawImage(image, 0, 0); this.zoomifyImage_ = context.canvas; return context.canvas; @@ -197,7 +208,6 @@ ol.source.Zoomify.Tile_.prototype.getImage = function() { } }; - /** * @enum {string} * @private diff --git a/test/spec/ol/source/zoomify.test.js b/test/spec/ol/source/zoomify.test.js index cb39adab88..72cde203db 100644 --- a/test/spec/ol/source/zoomify.test.js +++ b/test/spec/ol/source/zoomify.test.js @@ -1,5 +1,6 @@ +goog.require('ol'); goog.require('ol.dom'); goog.require('ol.events'); goog.require('ol.proj.Projection'); @@ -30,6 +31,13 @@ describe('ol.source.Zoomify', function() { size: size }); } + function getZoomifySourceWith1024pxTiles() { + return new ol.source.Zoomify({ + url: zoomifyUrl, + size: size, + tileSize: 1024 + }); + } describe('constructor', function() { @@ -148,6 +156,14 @@ describe('ol.source.Zoomify', function() { } }); + it('has expected tileSize', function() { + var sources = [getZoomifySource(), getZoomifySourceWith1024pxTiles()]; + var expectedTileSizes = [ol.DEFAULT_TILE_SIZE, 1024]; + for (var i = 0; i < sources.length; i++) { + var tileGrid = sources[i].getTileGrid(); + expect(tileGrid.getTileSize()).to.eql(expectedTileSizes[i]); + } + }); }); describe('tierSizeCalculation configuration', function() { @@ -232,11 +248,6 @@ describe('ol.source.Zoomify', function() { describe('uses a custom tileClass', function() { - it('uses "ol.source.Zoomify.Tile_" as tileClass', function() { - var source = getZoomifySource(); - expect(source.tileClass).to.be(ol.source.Zoomify.Tile_); - }); - it('returns expected tileClass instances via "getTile"', function() { var source = getZoomifySource(); var tile = source.getTile(0, 0, -1, 1, proj);