Merge pull request #10562 from crubier/master

Zoomify: Separate the service pixel ratio and the device pixel ratio
2020-01-27 15:46:11 +01:00
parent 9cf8fe9e05 23d441f9f2
commit 29ea779f66
4 changed files with 50 additions and 112 deletions
--- a/examples/zoomify.html
+++ b/examples/zoomify.html
@@ -10,7 +10,6 @@ tags: "zoomify, deep zoom, IIP, pixel, projection"
 <div class="controls">
  <select id="zoomifyProtocol">
    <option value="zoomify">Zoomify</option>
-    <option value="iip">IIP</option>
    <option value="zoomifyretina">Zoomify Retina</option>
  </select>
 </div>
--- a/examples/zoomify.js
+++ b/examples/zoomify.js
@@ -3,36 +3,42 @@ import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import Zoomify from '../src/ol/source/Zoomify.js';

-const imgWidth = 9911;
-const imgHeight = 6100;
+const imgWidth = 4000;
+const imgHeight = 3000;

-const zoomifyUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
-    '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
-const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' + '&JTL={z},{tileIndex}';
+const zoomifyUrl = 'https://ol-zoomify.surge.sh/zoomify/';

-const layer = new TileLayer({
-  source: new Zoomify({
-    tileSize: 256,
-    tilePixelRatio: 1,
-    url: zoomifyUrl,
-    size: [imgWidth, imgHeight],
-    crossOrigin: 'anonymous'
-  })
+const source = new Zoomify({
+  url: zoomifyUrl,
+  size: [imgWidth, imgHeight],
+  crossOrigin: 'anonymous',
+  zDirection: -1 // Ensure we get a tile with the screen resolution or higher
+});
+const extent = source.getTileGrid().getExtent();
+
+const retinaPixelRatio = 2;
+const retinaSource = new Zoomify({
+  url: zoomifyUrl,
+  size: [imgWidth, imgHeight],
+  crossOrigin: 'anonymous',
+  zDirection: -1, // Ensure we get a tile with the screen resolution or higher
+  tilePixelRatio: retinaPixelRatio, // Display retina tiles
+  tileSize: 256 / retinaPixelRatio // from a higher zoom level
 });

-const extent = [0, -imgHeight, imgWidth, 0];
-
-const resolutions = layer.getSource().getTileGrid().getResolutions();
+const layer = new TileLayer({
+  source: source
+});

 const map = new Map({
  layers: [layer],
  target: 'map',
  view: new View({
    // adjust zoom levels to those provided by the source
-    minResolution: resolutions[resolutions.length - 1],
-    maxResolution: resolutions[0],
+    resolutions: layer.getSource().getTileGrid().getResolutions(),
    // constrain the center: center cannot be set outside this extent
-    extent: extent
+    extent: extent,
+    constrainOnlyCenter: true
  })
 });
 map.getView().fit(extent);
@@ -40,74 +46,11 @@ map.getView().fit(extent);
 const control = document.getElementById('zoomifyProtocol');
 control.addEventListener('change', function(event) {
  const value = event.currentTarget.value;
-  if (value === 'iip') {
-    const extent = [0, -imgHeight, imgWidth, 0];
-    layer.setSource(
-      new Zoomify({
-        tileSize: 256,
-        tilePixelRatio: 1,
-        url: iipUrl,
-        size: [imgWidth, imgHeight],
-        crossOrigin: 'anonymous'
-      })
-    );
-    const resolutions = layer.getSource().getTileGrid().getResolutions();
-    map.setView(
-      new View({
-        // adjust zoom levels to those provided by the source
-        minResolution: resolutions[resolutions.length - 1],
-        maxResolution: resolutions[0],
-        // constrain the center: center cannot be set outside this extent
-        extent: extent
-      })
-    );
-    map.getView().fit(extent);
-  } else if (value === 'zoomify') {
-    const extent = [0, -imgHeight, imgWidth, 0];
-    layer.setSource(
-      new Zoomify({
-        tileSize: 256,
-        tilePixelRatio: 1,
-        url: zoomifyUrl,
-        size: [imgWidth, imgHeight],
-        crossOrigin: 'anonymous'
-      })
-    );
-    const resolutions = layer.getSource().getTileGrid().getResolutions();
-    map.setView(
-      new View({
-        // adjust zoom levels to those provided by the source
-        minResolution: resolutions[resolutions.length - 1],
-        maxResolution: resolutions[0],
-        // constrain the center: center cannot be set outside this extent
-        extent: extent
-      })
-    );
-    map.getView().fit(extent);
+  if (value === 'zoomify') {
+    layer.setSource(source);
  } else if (value === 'zoomifyretina') {
-    const pixelRatio = 4;
-    // Be careful! Image extent will be modified by pixel ratio
-    const extent = [0, -imgHeight / pixelRatio, imgWidth / pixelRatio, 0];
-    layer.setSource(
-      new Zoomify({
-        tileSize: 256 / pixelRatio,
-        tilePixelRatio: pixelRatio,
-        url: zoomifyUrl,
-        size: [imgWidth / pixelRatio, imgHeight / pixelRatio],
-        crossOrigin: 'anonymous'
-      })
-    );
-    const resolutions = layer.getSource().getTileGrid().getResolutions();
-    map.setView(
-      new View({
-        // adjust zoom levels to those provided by the source
-        minResolution: resolutions[resolutions.length - 1] / pixelRatio,
-        maxResolution: resolutions[0],
-        // constrain the center: center cannot be set outside this extent
-        extent: extent
-      })
-    );
-    map.getView().fit(extent);
+    layer.setSource(retinaSource);
  }
-
 });
+
+
--- a/src/ol/source/IIIF.js
+++ b/src/ol/source/IIIF.js
@@ -9,6 +9,7 @@ import {Versions} from '../format/IIIFInfo.js';
 import {assert} from '../asserts.js';
 import TileGrid from '../tilegrid/TileGrid.js';
 import TileImage from './TileImage.js';
+import {toSize} from '../size.js';

 /**
 * @typedef {Object} Options
@@ -87,7 +88,7 @@ class IIIF extends TileImage {
    const extent = options.extent || [0, -height, width, 0];

    const supportsListedSizes = sizes != undefined && Array.isArray(sizes) && sizes.length > 0;
-    const supportsListedTiles = tileSize != undefined && (typeof tileSize === 'number' && Number.isInteger(tileSize) && tileSize > 0 || Array.isArray(tileSize) && tileSize.length > 0);
+    const supportsListedTiles = tileSize !== undefined && (typeof tileSize === 'number' && Number.isInteger(tileSize) && tileSize > 0 || Array.isArray(tileSize) && tileSize.length > 0);
    const supportsArbitraryTiling = supports != undefined && Array.isArray(supports) &&
      (supports.includes('regionByPx') || supports.includes('regionByPct')) &&
      (supports.includes('sizeByWh') || supports.includes('sizeByH') ||
@@ -265,7 +266,9 @@ class IIIF extends TileImage {
      return baseUrl + regionParam + '/' + sizeParam + '/0/' + quality + '.' + format;
    };

-    const IiifTileClass = CustomTile.bind(null, tilePixelRatio, tileGrid);
+    const IiifTileClass = CustomTile.bind(null, toSize(tileSize || 256).map(function(size) {
+      return size * tilePixelRatio;
+    }));

    super({
      attributions: options.attributions,
--- a/src/ol/source/Zoomify.js
+++ b/src/ol/source/Zoomify.js
@@ -8,7 +8,6 @@ import TileState from '../TileState.js';
 import {expandUrl, createFromTileUrlFunctions} from '../tileurlfunction.js';
 import {assert} from '../asserts.js';
 import {createCanvasContext2D} from '../dom.js';
-import {getTopLeft} from '../extent.js';
 import {toSize} from '../size.js';
 import TileImage from './TileImage.js';
 import TileGrid from '../tilegrid/TileGrid.js';
@@ -26,8 +25,7 @@ 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("../size.js").Size} tileSize Full tile size.
   * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
   * @param {TileState} state State.
   * @param {string} src Image source URI.
@@ -35,7 +33,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(tileSize, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
+
    super(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options);

    /**
@@ -45,14 +44,10 @@ export class CustomTile extends ImageTile {
    this.zoomifyImage_ = null;

    /**
-     * @private
     * @type {import("../size.js").Size}
     */
-    this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0])).map(
-      function(x) {
-        return x * tilePixelRatio;
-      }
-    );
+    this.tileSize_ = tileSize;
+
  }

  /**
@@ -114,8 +109,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.
 */
@@ -141,13 +136,12 @@ class Zoomify extends TileImage {
      options.tierSizeCalculation :
      TierSizeCalculation.DEFAULT;

+    const tilePixelRatio = options.tilePixelRatio || 1;
    const imageWidth = size[0];
    const imageHeight = size[1];
-    const extent = options.extent || [0, -size[1], size[0], 0];
    const tierSizeInTiles = [];
    const tileSize = options.tileSize || DEFAULT_TILE_SIZE;
-    const tilePixelRatio = options.tilePixelRatio || 1;
-    let tileSizeForTierSizeCalculation = tileSize;
+    let tileSizeForTierSizeCalculation = tileSize * tilePixelRatio;

    switch (tierSizeCalculation) {
      case TierSizeCalculation.DEFAULT:
@@ -179,10 +173,10 @@ class Zoomify extends TileImage {
    tierSizeInTiles.push([1, 1]);
    tierSizeInTiles.reverse();

-    const resolutions = [1];
+    const resolutions = [tilePixelRatio];
    const tileCountUpToTier = [0];
    for (let i = 1, ii = tierSizeInTiles.length; i < ii; i++) {
-      resolutions.push(1 << i);
+      resolutions.push(tilePixelRatio << i);
      tileCountUpToTier.push(
        tierSizeInTiles[i - 1][0] * tierSizeInTiles[i - 1][1] +
          tileCountUpToTier[i - 1]
@@ -192,8 +186,7 @@ class Zoomify extends TileImage {

    const tileGrid = new TileGrid({
      tileSize: tileSize,
-      extent: extent,
-      origin: getTopLeft(extent),
+      extent: options.extent || [0, -imageHeight, imageWidth, 0],
      resolutions: resolutions
    });

@@ -203,6 +196,8 @@ class Zoomify extends TileImage {
    }
    const urls = expandUrl(url);

+    const tileWidth = tileSize * tilePixelRatio;
+
    /**
     * @param {string} template Template.
     * @return {import("../Tile.js").UrlFunction} Tile URL function.
@@ -226,8 +221,6 @@ class Zoomify extends TileImage {
            const tileIndex =
                tileCoordX +
                tileCoordY * tierSizeInTiles[tileCoordZ][0];
-            const tileSize = tileGrid.getTileSize(tileCoordZ);
-            const tileWidth = Array.isArray(tileSize) ? tileSize[0] : tileSize;
            const tileGroup = ((tileIndex + tileCountUpToTier[tileCoordZ]) / tileWidth) | 0;
            const localContext = {
              'z': tileCoordZ,
@@ -246,7 +239,7 @@ class Zoomify extends TileImage {

    const tileUrlFunction = createFromTileUrlFunctions(urls.map(createFromTemplate));

-    const ZoomifyTileClass = CustomTile.bind(null, tilePixelRatio, tileGrid);
+    const ZoomifyTileClass = CustomTile.bind(null, toSize(tileSize * tilePixelRatio));

    super({
      attributions: options.attributions,