diff --git a/examples/zoomify.js b/examples/zoomify.js index 0da330b013..047dbd1146 100644 --- a/examples/zoomify.js +++ b/examples/zoomify.js @@ -38,17 +38,16 @@ control.addEventListener('change', function(event) { layer.setSource(new Zoomify({ url: zoomifyUrl, size: [imgWidth, imgHeight], - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', + zDirection: -1 // Ensure we get the most precise tile in any case })); } else if (value === 'zoomifyretina') { layer.setSource(new Zoomify({ - tileSize: 256, // The tile size is 256px on the server, this is the default value - tilePixelRatio: 2, // We want to display this on a retina screen - tilePixelRatioOriginal: 1, // But the server serves 256px tiles, not 512px tiles that would be needed nominally. - zDirection: -1, //Ensure we get the most precise tile in any case url: zoomifyUrl, size: [imgWidth, imgHeight], - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', + zDirection: -1, // Ensure we get the most precise tile in any case + tilePixelRatio: 2 // Display retina tiles })); } }); diff --git a/src/ol/source/Zoomify.js b/src/ol/source/Zoomify.js index cc2ec00c34..e42ebaddeb 100644 --- a/src/ol/source/Zoomify.js +++ b/src/ol/source/Zoomify.js @@ -26,7 +26,6 @@ const TierSizeCalculation = { export class CustomTile extends ImageTile { /** - * @param {number} tilePixelRatio Tile pixel ratio to display the tile * @param {import("../tilegrid/TileGrid.js").default} tileGrid TileGrid that the tile belongs to. * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate. * @param {TileState} state State. @@ -35,7 +34,8 @@ export class CustomTile extends ImageTile { * @param {import("../Tile.js").LoadFunction} tileLoadFunction Tile load function. * @param {import("../Tile.js").Options=} opt_options Tile options. */ - constructor(tilePixelRatio, tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { + constructor(tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) { + super(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options); /** @@ -48,11 +48,8 @@ export class CustomTile extends ImageTile { * @private * @type {import("../size.js").Size} */ - this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0])).map( - function(x) { - return x * tilePixelRatio; - } - ); + this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0])); + } /** @@ -90,8 +87,7 @@ export class CustomTile extends ImageTile { * you must provide a `crossOrigin` value you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. * @property {import("../proj.js").ProjectionLike} [projection] Projection. - * @property {number} [tilePixelRatio] The pixel ratio to display on screen. If on a retina screen then `tilePixelRatio` should be 2, else it should be 1. - * @property {number} [tilePixelRatioOriginal] The pixel ratio used by the tile service. For example, if the tile service advertizes 256px by 256px tiles but actually sends 512px by 512px images (for retina/hidpi devices) then `tilePixelRatioOriginal` should be set to `2` + * @property {number} [tilePixelRatio] The pixel ratio used by the tile service. For example, if the tile service advertizes 256px by 256px tiles but actually sends 512px by 512px images (for retina/hidpi devices) then `tilePixelRatio` should be set to `2` * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. * @property {string} [url] URL template or base URL of the Zoomify service. @@ -115,8 +111,8 @@ export class CustomTile extends ImageTile { * @property {number} [transition] Duration of the opacity transition for rendering. * To disable the opacity transition, pass `transition: 0`. * @property {number} [tileSize=256] Tile size. Same tile size is used for all zoom levels. - * @property {number} [zDirection=0] Indicate which resolution should be used - * by a renderer if the view resolution does not match any resolution of the tile source. + * @property {number} [zDirection] Indicate which resolution should be used + * by a renderer if the views resolution does not match any resolution of the tile source. * If 0, the nearest resolution will be used. If 1, the nearest lower resolution * will be used. If -1, the nearest higher resolution will be used. */ @@ -147,8 +143,6 @@ class Zoomify extends TileImage { const extent = options.extent || [0, -size[1], size[0], 0]; const tierSizeInTiles = []; const tileSize = options.tileSize || DEFAULT_TILE_SIZE; - const tilePixelRatio = options.tilePixelRatio || 1; - const tilePixelRatioOriginal = options.tilePixelRatioOriginal || tilePixelRatio; let tileSizeForTierSizeCalculation = tileSize; switch (tierSizeCalculation) { @@ -248,14 +242,14 @@ class Zoomify extends TileImage { const tileUrlFunction = createFromTileUrlFunctions(urls.map(createFromTemplate)); - const ZoomifyTileClass = CustomTile.bind(null, tilePixelRatioOriginal, tileGrid); + const ZoomifyTileClass = CustomTile.bind(null, tileGrid); super({ attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, projection: options.projection, - tilePixelRatio: tilePixelRatio, + tilePixelRatio: options.tilePixelRatio, reprojectionErrorThreshold: options.reprojectionErrorThreshold, tileClass: ZoomifyTileClass, tileGrid: tileGrid, @@ -272,4 +266,4 @@ class Zoomify extends TileImage { } -export default Zoomify; +export default Zoomify; \ No newline at end of file