Tiled Image

This tutorial has examples of different protocols for getting tiles from server. It also shows different possibilities of using the class geotoolkit/scene/shapes/TiledShapefor rendering images. Mouse can be used to scroll or hold down the control key and use the mouse to Zoom in and out.

# Image

This is only one image and it can be added by parameter images.

import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { initCanvas } from "/src/code/Carnac/Shapes/TiledImage/createPlotAndTools.ts";
function createScene(canvas) {
  return initCanvas(
    canvas,
    () => "https://openseadragon.github.io/example-images/highsmith/09250v.jpg",
    new Rect(0, 0, 1024, 683),
    {
      images: [{
        id: "_",
        width: 1024,
        height: 683
      }]
    }
  );
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# OSM

This is Open Street Map protocol, it is generally used for maps. Typically, there are some layers of tiles and the total capacity of the tiles in layer is multiplied by 2 for "deeper" layer. It can be added by parameters minlod/maxlod.

import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { initCanvas } from "/src/code/Carnac/Shapes/TiledImage/createPlotAndTools.ts";
function createScene(canvas) {
  return initCanvas(
    canvas,
    (data) => "https://demo.int.com/osm_tiles/" + data["z"] + "/" + data["i"] + "/" + data["j"] + ".png",
    new Rect(0, 0, 256, 256),
    {
      tilew: 256,
      tileh: 256,
      minlod: 0,
      maxlod: 15
    }
  );
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# DZI

This is Deep Zoom Image protocol. The main idea is the same as OSM, but edge tiles can have different sizes from other. It can be added by parameters minlod/maxlod.

import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { initCanvas } from "/src/code/Carnac/Shapes/TiledImage/createPlotAndTools.ts";
function createScene(canvas) {
  return initCanvas(canvas, (data) => "http://openseadragon.github.io/example-images/highsmith/highsmith_files/" + (data["z"] + 8) + "/" + data["i"] + "_" + data["j"] + ".jpg", new Rect(0, 0, 110, 145), {
    tilew: 256,
    tileh: 256,
    minlod: 0,
    maxlod: 14 - 8
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Legacy

This is legacy pyramid protocol, there are some amount of images with different resolutions. It can be added by parameter images.

import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { initCanvas } from "/src/code/Carnac/Shapes/TiledImage/createPlotAndTools.ts";
function createScene(canvas) {
  return initCanvas(
    canvas,
    (data) => "http://openseadragon.github.io/example-images/rbc/rbc0001/2003/2003rosen1799/0001" + data["id"] + ".jpg",
    new Rect(0, 0, 600, 889),
    {
      images: [{
        id: "q",
        height: 889,
        width: 600
      }, {
        id: "r",
        width: 1485,
        height: 2201
      }, {
        id: "v",
        width: 2970,
        height: 4402
      }]
    }
  );
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Custom

This is an example for customization possibilities of formatter function of TiledShape.

import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { initCanvas } from "/src/code/Carnac/Shapes/TiledImage/createPlotAndTools.ts";
function createScene(canvas) {
  return initCanvas(canvas, (data) => {
    const size = data["z"] > 3 ? 2 : 1;
    const j = ("0" + (data["j"] + 1)).substr(-size);
    const i = ("0" + (data["i"] + 1)).substr(-size);
    if (data["z"] === 6) {
      return "http://onyx.int.com:8080/geoserver/www/example/example_" + j + "_" + i + ".jpg";
    }
    return "http://onyx.int.com:8080/geoserver/www/example/" + (6 - data["z"]) + "/example_" + j + "_" + i + ".jpg";
  }, new Rect(0, 0, 192, 192), {
    tilew: 256,
    tileh: 256,
    minlod: 0,
    maxlod: 6
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# IIIF

This is IIIF protocol, the tile will be generated on the server using the size of the device area on client. It has no "layers", but has coordinates of destination of tiles, that will be sent on server. Also, this is implementation of https://openseadragon.github.io/ protocols and you can see this site for more info. Look at "Supported Tile Sources" paragraph: there are links to descriptions of these protocols.

import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { initCanvas } from "/src/code/Carnac/Shapes/TiledImage/createPlotAndTools.ts";
function createScene(canvas) {
  return initCanvas(canvas, (data) => {
    const modelTileRect = data["tilerect"];
    const area = data["transformedmodelrect"];
    const tileRect = data["devicearea"];
    const cropPic = tileRect.clone().intersect(area);
    const cropHeight = Math.min(Math.ceil(cropPic.getHeight()), area.getHeight());
    const cropWidth = Math.min(Math.ceil(cropPic.getWidth()), area.getWidth());
    return "https://iiif.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/" + Math.floor(modelTileRect.getX()) + "," + Math.floor(modelTileRect.getY()) + "," + Math.floor(modelTileRect.getWidth()) + "," + Math.floor(modelTileRect.getHeight()) + "/" + Math.floor(cropWidth) + "," + Math.floor(cropHeight) + "/0/default.jpg";
  }, new Rect(0, 0, 5233, 7200), {
    tilew: 1024,
    tileh: 1024
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));