Revert #9489 and solves retina tiles on zoomify apparently.

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
     }));
   }
 });

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(
+    this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0]));
-      function(x) {
+
-        return x * tilePixelRatio;
-      }
-    );
   }
 
   /**
@@ -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} [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} [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} [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
+ * @property {number} [zDirection] Indicate which resolution should be used
- * by a renderer if the view resolution does not match any resolution of the tile source.
+ * 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;