From e41693816a112e321fef02b84127630327cc2273 Mon Sep 17 00:00:00 2001 From: Lasse Laakkonen Date: Thu, 19 Oct 2017 15:38:00 +0300 Subject: [PATCH 1/6] Add support for custom tile size to Zoomify layer. https://github.com/openlayers/openlayers/issues/6608 --- externs/olx.js | 9 +++++++++ src/ol/imagetile.js | 9 +++++++++ src/ol/source/tile.js | 5 ++++- src/ol/source/zoomify.js | 23 +++++++++++++---------- 4 files changed, 35 insertions(+), 11 deletions(-) diff --git a/externs/olx.js b/externs/olx.js index c4a5ebb218..9f69655d9e 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -7326,6 +7326,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/imagetile.js b/src/ol/imagetile.js index 139d5b0e46..89c60e62fd 100644 --- a/src/ol/imagetile.js +++ b/src/ol/imagetile.js @@ -19,6 +19,7 @@ goog.require('ol.events.EventType'); * @param {olx.TileOptions=} opt_options Tile options. */ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { + var options = opt_options || {}; ol.Tile.call(this, tileCoord, state, opt_options); @@ -51,6 +52,14 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, op */ this.tileLoadFunction_ = tileLoadFunction; + var tileCoordZ = tileCoord[0]; + var tileGridTileSize = (options.tileGrid ? options.tileGrid.getTileSize(tileCoordZ) : undefined); + + /** + * @protected + * @type {number} + */ + this.tileSize_ = tileGridTileSize || ol.DEFAULT_TILE_SIZE; }; ol.inherits(ol.ImageTile, ol.Tile); diff --git a/src/ol/source/tile.js b/src/ol/source/tile.js index ddc39273c3..e110ef9353 100644 --- a/src/ol/source/tile.js +++ b/src/ol/source/tile.js @@ -75,7 +75,10 @@ ol.source.Tile = function(options) { * @protected * @type {olx.TileOptions} */ - this.tileOptions = {transition: options.transition}; + this.tileOptions = { + transition: options.transition, + tileGrid: this.tileGrid + }; }; ol.inherits(ol.source.Tile, ol.source.Source); diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index 467f8aee79..e763d00342 100644 --- a/src/ol/source/zoomify.js +++ b/src/ol/source/zoomify.js @@ -33,25 +33,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 +80,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 +115,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, @@ -180,7 +183,7 @@ ol.source.Zoomify.Tile_.prototype.getImage = function() { if (this.zoomifyImage_) { return this.zoomifyImage_; } - var tileSize = ol.DEFAULT_TILE_SIZE; + var tileSize = this.tileSize_; var image = ol.ImageTile.prototype.getImage.call(this); if (this.state == ol.TileState.LOADED) { if (image.width == tileSize && image.height == tileSize) { From b8589acc6e01092cbf85048e350da25c1562c42e Mon Sep 17 00:00:00 2001 From: Lasse Laakkonen Date: Thu, 19 Oct 2017 17:54:46 +0300 Subject: [PATCH 2/6] Add test for initializing Zoomify source with custom tile size. --- test/spec/ol/source/zoomify.test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/spec/ol/source/zoomify.test.js b/test/spec/ol/source/zoomify.test.js index cb39adab88..4b202e0164 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() { From e2581931a7788347f1a778089101ec69b6d3bf46 Mon Sep 17 00:00:00 2001 From: Lasse Laakkonen Date: Mon, 30 Oct 2017 21:53:52 +0200 Subject: [PATCH 3/6] Add tileSize property definition to olx.source.ZoomifyOptions definition. --- externs/olx.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/externs/olx.js b/externs/olx.js index 9f69655d9e..78fb0a9f2d 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -7226,7 +7226,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; From 2836f9511f2b79434f4ebeada12f9c1458f5df81 Mon Sep 17 00:00:00 2001 From: Lasse Laakkonen Date: Tue, 31 Oct 2017 09:31:38 +0200 Subject: [PATCH 4/6] Remove unnecessary changes to Tile and ImageTile for changing Zoomify source tile size. --- src/ol/imagetile.js | 9 ---- src/ol/source/tile.js | 5 +- src/ol/source/zoomify.js | 109 +++++++++++++++++++++------------------ 3 files changed, 59 insertions(+), 64 deletions(-) diff --git a/src/ol/imagetile.js b/src/ol/imagetile.js index 89c60e62fd..139d5b0e46 100644 --- a/src/ol/imagetile.js +++ b/src/ol/imagetile.js @@ -19,7 +19,6 @@ goog.require('ol.events.EventType'); * @param {olx.TileOptions=} opt_options Tile options. */ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { - var options = opt_options || {}; ol.Tile.call(this, tileCoord, state, opt_options); @@ -52,14 +51,6 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, op */ this.tileLoadFunction_ = tileLoadFunction; - var tileCoordZ = tileCoord[0]; - var tileGridTileSize = (options.tileGrid ? options.tileGrid.getTileSize(tileCoordZ) : undefined); - - /** - * @protected - * @type {number} - */ - this.tileSize_ = tileGridTileSize || ol.DEFAULT_TILE_SIZE; }; ol.inherits(ol.ImageTile, ol.Tile); diff --git a/src/ol/source/tile.js b/src/ol/source/tile.js index e110ef9353..ddc39273c3 100644 --- a/src/ol/source/tile.js +++ b/src/ol/source/tile.js @@ -75,10 +75,7 @@ ol.source.Tile = function(options) { * @protected * @type {olx.TileOptions} */ - this.tileOptions = { - transition: options.transition, - tileGrid: this.tileGrid - }; + this.tileOptions = {transition: options.transition}; }; ol.inherits(ol.source.Tile, ol.source.Source); diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index e763d00342..2e9db75821 100644 --- a/src/ol/source/zoomify.js +++ b/src/ol/source/zoomify.js @@ -11,6 +11,62 @@ goog.require('ol.source.TileImage'); goog.require('ol.tilegrid.TileGrid'); +/** + * @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. + * @param {?string} crossOrigin Cross origin. + * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function. + * @param {olx.TileOptions=} opt_options Tile options. + * @private + */ +var ZoomifyTileClass = function( + tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { + + ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options); + + /** + * @private + * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} + */ + this.zoomifyImage_ = null; + + /** + * @private + * @type {ol.Size|number} + */ + this.tileSize_ = tileGrid.getTileSize(tileCoord[0]); +}; +ol.inherits(ZoomifyTileClass, ol.ImageTile); + + +/** + * @inheritDoc + */ +ZoomifyTileClass.prototype.getImage = function() { + if (this.zoomifyImage_) { + return this.zoomifyImage_; + } + var tileSize = (Array.isArray(this.tileSize_) ? this.tileSize_[0] : this.tileSize_); + var image = ol.ImageTile.prototype.getImage.call(this); + if (this.state == ol.TileState.LOADED) { + if (image.width == tileSize && image.height == tileSize) { + this.zoomifyImage_ = image; + return image; + } else { + var context = ol.dom.createCanvasContext2D(tileSize, tileSize); + context.drawImage(image, 0, 0); + this.zoomifyImage_ = context.canvas; + return context.canvas; + } + } else { + return image; + } +}; + /** * @classdesc * Layer source for tile data in Zoomify format (both Zoomify and Internet @@ -133,6 +189,8 @@ ol.source.Zoomify = function(opt_options) { var tileUrlFunction = ol.TileUrlFunction.createFromTileUrlFunctions(urls.map(createFromTemplate)); + ol.source.Zoomify.Tile_ = ZoomifyTileClass.bind(null, tileGrid); + ol.source.TileImage.call(this, { attributions: options.attributions, cacheSize: options.cacheSize, @@ -150,57 +208,6 @@ ol.source.Zoomify = function(opt_options) { ol.inherits(ol.source.Zoomify, ol.source.TileImage); -/** - * @constructor - * @extends {ol.ImageTile} - * @param {ol.TileCoord} tileCoord Tile coordinate. - * @param {ol.TileState} state State. - * @param {string} src Image source URI. - * @param {?string} crossOrigin Cross origin. - * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function. - * @param {olx.TileOptions=} opt_options Tile options. - * @private - */ -ol.source.Zoomify.Tile_ = function( - tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { - - ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options); - - /** - * @private - * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} - */ - this.zoomifyImage_ = null; - -}; -ol.inherits(ol.source.Zoomify.Tile_, ol.ImageTile); - - -/** - * @inheritDoc - */ -ol.source.Zoomify.Tile_.prototype.getImage = function() { - if (this.zoomifyImage_) { - return this.zoomifyImage_; - } - var tileSize = this.tileSize_; - var image = ol.ImageTile.prototype.getImage.call(this); - if (this.state == ol.TileState.LOADED) { - if (image.width == tileSize && image.height == tileSize) { - this.zoomifyImage_ = image; - return image; - } else { - var context = ol.dom.createCanvasContext2D(tileSize, tileSize); - context.drawImage(image, 0, 0); - this.zoomifyImage_ = context.canvas; - return context.canvas; - } - } else { - return image; - } -}; - - /** * @enum {string} * @private From 3c8c7db8f354b5d8bc0f4c5c359f786ea0b53fbd Mon Sep 17 00:00:00 2001 From: Lasse Laakkonen Date: Tue, 31 Oct 2017 11:12:18 +0200 Subject: [PATCH 5/6] Fix using multiple Zoomify sources at a time.. --- src/ol/source/zoomify.js | 115 ++++++++++++++-------------- test/spec/ol/source/zoomify.test.js | 5 -- 2 files changed, 57 insertions(+), 63 deletions(-) diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index 2e9db75821..74b7a63ed2 100644 --- a/src/ol/source/zoomify.js +++ b/src/ol/source/zoomify.js @@ -11,62 +11,6 @@ goog.require('ol.source.TileImage'); goog.require('ol.tilegrid.TileGrid'); -/** - * @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. - * @param {?string} crossOrigin Cross origin. - * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function. - * @param {olx.TileOptions=} opt_options Tile options. - * @private - */ -var ZoomifyTileClass = function( - tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { - - ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options); - - /** - * @private - * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} - */ - this.zoomifyImage_ = null; - - /** - * @private - * @type {ol.Size|number} - */ - this.tileSize_ = tileGrid.getTileSize(tileCoord[0]); -}; -ol.inherits(ZoomifyTileClass, ol.ImageTile); - - -/** - * @inheritDoc - */ -ZoomifyTileClass.prototype.getImage = function() { - if (this.zoomifyImage_) { - return this.zoomifyImage_; - } - var tileSize = (Array.isArray(this.tileSize_) ? this.tileSize_[0] : this.tileSize_); - var image = ol.ImageTile.prototype.getImage.call(this); - if (this.state == ol.TileState.LOADED) { - if (image.width == tileSize && image.height == tileSize) { - this.zoomifyImage_ = image; - return image; - } else { - var context = ol.dom.createCanvasContext2D(tileSize, tileSize); - context.drawImage(image, 0, 0); - this.zoomifyImage_ = context.canvas; - return context.canvas; - } - } else { - return image; - } -}; - /** * @classdesc * Layer source for tile data in Zoomify format (both Zoomify and Internet @@ -189,7 +133,7 @@ ol.source.Zoomify = function(opt_options) { var tileUrlFunction = ol.TileUrlFunction.createFromTileUrlFunctions(urls.map(createFromTemplate)); - ol.source.Zoomify.Tile_ = ZoomifyTileClass.bind(null, tileGrid); + var ZoomifyTileClass = ol.source.Zoomify.Tile_.bind(null, tileGrid); ol.source.TileImage.call(this, { attributions: options.attributions, @@ -198,7 +142,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 @@ -207,6 +151,61 @@ 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. + * @param {?string} crossOrigin Cross origin. + * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function. + * @param {olx.TileOptions=} opt_options Tile options. + * @private + */ +ol.source.Zoomify.Tile_ = function( + tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { + + ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options); + + /** + * @private + * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} + */ + this.zoomifyImage_ = null; + + /** + * @private + * @type {ol.Size|number} + */ + this.tileSize_ = tileGrid.getTileSize(tileCoord[0]); +}; +ol.inherits(ol.source.Zoomify.Tile_, ol.ImageTile); + + +/** + * @inheritDoc + */ +ol.source.Zoomify.Tile_.prototype.getImage = function() { + if (this.zoomifyImage_) { + return this.zoomifyImage_; + } + var tileSize = (Array.isArray(this.tileSize_) ? this.tileSize_[0] : this.tileSize_); + var image = ol.ImageTile.prototype.getImage.call(this); + if (this.state == ol.TileState.LOADED) { + if (image.width == tileSize && image.height == tileSize) { + this.zoomifyImage_ = image; + return image; + } else { + var context = ol.dom.createCanvasContext2D(tileSize, tileSize); + context.drawImage(image, 0, 0); + this.zoomifyImage_ = context.canvas; + return context.canvas; + } + } else { + return image; + } +}; /** * @enum {string} diff --git a/test/spec/ol/source/zoomify.test.js b/test/spec/ol/source/zoomify.test.js index 4b202e0164..72cde203db 100644 --- a/test/spec/ol/source/zoomify.test.js +++ b/test/spec/ol/source/zoomify.test.js @@ -248,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); From da2a23aacd062cb5fb64ffd853ce899d1626d7a6 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 31 Oct 2017 10:36:20 +0100 Subject: [PATCH 6/6] Always use ol.Size tile size array --- src/ol/source/zoomify.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index 74b7a63ed2..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'); @@ -176,9 +177,9 @@ ol.source.Zoomify.Tile_ = function( /** * @private - * @type {ol.Size|number} + * @type {ol.Size} */ - this.tileSize_ = tileGrid.getTileSize(tileCoord[0]); + this.tileSize_ = ol.size.toSize(tileGrid.getTileSize(tileCoord[0])); }; ol.inherits(ol.source.Zoomify.Tile_, ol.ImageTile); @@ -190,14 +191,14 @@ ol.source.Zoomify.Tile_.prototype.getImage = function() { if (this.zoomifyImage_) { return this.zoomifyImage_; } - var tileSize = (Array.isArray(this.tileSize_) ? this.tileSize_[0] : this.tileSize_); 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;