ol5.3ex 6 - Zoomify

「Zoomify (zoomify.html) 」を参考に地図を表示してみます。

「About Zoomify, Inc.（http://www.zoomify.com/about.htm）」に次のようにあります。

Vision
Zoomify makes high-quality images zoom-and-pan for fast, interactive viewing on the web with just HTML, JPEGs, and JavaScript! Zoomify's products meet the high-resolution imaging needs of creative professionals, image-centric businesses, and digital device developers. Zoomify is revolutionizing digital imaging in commerce, education, entertainment, science, and security. Technologies include HTML5 viewing options, web-based annotation, and more.
Zoomify は、高画質イメージを、素早くズームとパンし、HTML と JPEGs、JavaScrip だけを使ってウェッブ上でインタラクティブビューにします。Zoomify の製品は、創造的なプロフェッショナルの高解像度画像のニーズや画像中心のビジネス、デジタルデバイス開発者にあっています。Zoomify は、商業や教育、エンターテイメント、科学、セキュリティのデジタル画像に革命を起こしています。技術は HTML5 ビューオプションやウェッブベースの注釈などを含んでいます。

説明に次のようにあります。

Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. Internet Imaging Protocol (IIP) with JTL extension is also handled.

Zoomify は、高解像度画像にする深いズームのフォーマットです。この例はピクセル投影法で Zoomify ソースを使用する方法を示しています。JTL 拡張でインターネットイメージプロトコルも取り扱えます。

次の内容で index.js を作成します。

user@deb9-vmw:~/new-project$ vim index.js

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Zoomify from 'ol/source/Zoomify.js';

var imgWidth = 9911;
var imgHeight = 6100;

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

var layer = new TileLayer({
/** ol/layer/Tile~TileLayer 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング（事前描画）を提供するレイヤソースのため
 * の、特定の解像度でのズームレベルによって編成されているグ
 * リッドのタイルイメージ。（ol5 API）
 */

 source: new Zoomify({
 /** source [TileLayer（option）]
  * Source for this layer. 
  * レイヤのソース。（ol5 API）
  */

 /** ol/source/Zoomify~Zoomify 
  * Layer source for tile data in Zoomify format (both 
  * Zoomify and Internet Imaging Protocol are supported).
  * Zoomify フォーマット（Zoomify と Internet Imaging 
  * Protocol の両方がサポートされる）タイルサデータのレイヤ
  * ソース。（ol5 API）
  */

  url: zoomifyUrl,
  /** url [Zoomify（option）]
   * URL template or base URL of the Zoomify service. A 
   * base URL is the fixed part of the URL, excluding 
   * the tile group, z, x, and y folder structure, e.g. 
   * http://my.zoomify.info/IMAGE.TIF/. A URL template 
   * must include {TileGroup}, {x}, {y}, and {z} 
   * placeholders, e.g. http://my.zoomify.info/
   * IMAGE.TIF/{TileGroup}/{z}-{x}-{y}.jpg. Internet 
   * Imaging Protocol (IIP) with JTL extension can be  
   * also used with {tileIndex} and {z} placeholders, 
   * e.g. http://my.zoomify.info?FIF=IMAGE.TIF&JTL={z},
   * {tileIndex}. A {?-?} template pattern, for example 
   * subdomain{a-f}.domain.com, may be used instead of 
   * defining each one separately in the urls option.
   * URL テンプレート、または、Zoomify サービスのベース URL。
   * ベース URL は、タイルグループ、x、z、y フォルダ構造を除
   * く、 URLの固定された部分、例えば、
   * http://my.zoomify.info/IMAGE.TIF/、です。URL テン
   * プレートは、{TileGroup}、{x}、{y}、{z} プレースホルダを
   * 含まなければなりません。例えば、http://my.zoomify.info/
   * IMAGE.TIF/{TileGroup}/{z}-{x}-{y}.jpg です。JTL 
   * 拡張子のついたInternet Imaging Protocol (IIP) は、
   * {tileIndex} と {z} プレースホルダをつけて使われます。
   * 例えば、http://my.zoomify.info?FIF=IMAGE.TIF&JTL=
   * {z},{tileIndex} です。{?-?} テンプレートパターン、例え
   * ば subdomain{a-f}.domain.com、は urls オプションで
   * それぞれを別に定義するかわりに使うことができます。
   * （ol5 API）
   */

  size: [imgWidth, imgHeight],
  /** size [Zoomify（option）]
   * Size of the image.
   * 画像のサイズ。
   * （ol5 API）
   */

  crossOrigin: 'anonymous'
  /** crossOrigin [Zoomify（option）]
   * The crossOrigin attribute for loaded images. Note 
   * that you must provide a crossOrigin value if you 
   * are using the WebGL renderer or if 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.
   * ロードされたイメージの crossOrigin 属性。WebGL レンダ
   * ラを使用している場合、または、Canvas レンダラでピクセル
   * データにアクセスする場合、crossOrigin 値を提供なければ
   * ならないことに注意してください。詳細は 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image を参照してください。
   * （ol5 API）
   */

 })
});

var extent = [0, -imgHeight, imgWidth, 0];

var map = new Map({
 layers: [layer],
 /** layers [Map(options)]
  * Layers. If this is not defined, a map with no layers 
  * will be rendered. Note that layers are rendered in 
  * the order supplied, so if you want, for example, a 
  * vector layer to appear on top of a tile layer, it 
  * must come after the tile layer.
  * レイヤ（layers）。これが定義されていない場合、レイヤのない
  * マップが描画されます。レイヤは提供された順番に描画されるの
  * で、例えば、ベクタレイヤがタイルレイヤの上に表示するよう望
  * むなら、タイルレイヤの後に来なければならないことに注意して
  * ください。（ol5 API）
  */

 target: 'map',
 /** target [Map(options)]
  * The container for the map, either the element itself 
  * or the id of the element. If not specified at 
  * construction time, module:ol/Map~Map#setTarget must 
  * be called for the map to be rendered.
  * map のコンテナ、（HTML）エレメント自身、または、エレメント
  * の id。構築時に指定されていない場合、描画される map のた
  * めに module：ol/Map~Map#setTarget が呼び出されなけれ
  * ばなりません。
  * （ol5 API）
  */

 view: new View({
 /** view [Map(options)]
  * The map's view. No layer sources will be fetched unless 
  * this is specified at construction time or through 
  * module:ol/Map~Map#setView.
  * map（マップ）の view（ビュー）。これが構築時に指定されて
  * いないか、module：ol/Map~Map#setView を介さなければ、取
  * 得されるレイヤソースはありません。
  * （ol5 API）
  */

  // adjust zoom levels to those provided by the source
  // ソースによって提供されたそれらのためにズームレベルを調整する

  resolutions: layer.getSource().getTileGrid().getResolutions(),
  /** resolutions [View(options)]
   * Resolutions to determine the resolution constraint. 
   * If set the maxResolution, minResolution, minZoom, 
   * maxZoom, and zoomFactor options are ignored.
   * resolution 制約を決定するための resolutions。
   * maxResolution が設定されている場合、inResolution, 
   * minZoom, maxZoom, and zoomFactor は無視されます。
   * （ol5 API）
   */

  /** getSource()
   * Return the associated tilesource of the the layer.
   * タイルレイヤの関連するタイルソースを返します。
   * （ol5 API）
   */

  /** getTileGrid()
   * Return the tile grid of the tile source.
   * タイルソースのタイルグリッドを返します。
   * （ol5 API）
   */

  /** getResolutions()
   * Get the list of resolutions for the tile grid.
   * タイルグリッドの解像度のリストを取得します。
   * （ol5 API）
   */

  // constrain the center: center cannot be set outside 
  // this extent
  // 中心を制約する: 中心をこの範囲の外に設定できません

  extent: extent
  /** extent [View(options)]
   * The extent that constrains the center, in other words, 
   * center cannot be set outside this extent.
   * 中心を制約する範囲、言い換えれば、中心をこの範囲の外に設
   * 定できません。
   * （ol5 API）
   */

 })
});

map.getView().fit(extent);
/** getView()
 * Get the view associated with this map. A view manages 
 * properties such as center and resolution.
 * このマップと関連するビューを取得します。ビューは、中心や解
 * 像度のような属性を管理します。
 * （ol5 API）
 */

/** fit(geometryOrExtent, opt_options)
 * Fit the given geometry or extent based on the given 
 * map size and border. The size is pixel dimensions of 
 * the box to fit the extent into. In most cases you 
 * will want to use the map size, that is map.getSize(). 
 * Takes care of the map angle.
 * 与えられたジオメトリと与えられたマップサイズと境界をもとと
 * した範囲を合わせます。サイズは、範囲内に合わせるために、ボッ
 * クスの単位はピクセルです。ほとんどの場合、マップサイズを使
 * いますが、それは map.getSize() です。マップアングルに気
 * をつけてください。
 * （ol5 API）
 */

var control = document.getElementById('zoomifyProtocol');
/** Document.getElementById()
 * The Document method getElementById() returns an 
 * Element object representing the element whose id 
 * property matches the specified string. Since element 
 * IDs are required to be unique if specified, they're a 
 * useful way to get access to a specific element 
 * quickly.
 * If you need to get access to an element which doesn't 
 * have an ID, you can use querySelector() to find the 
 * element using any selector.
 * Document の getElementById() メソッドは、 id プロパティ
 * が指定された文字列に一致する要素を表す Element オブジェ
 * クトを返します。要素の ID は、指定されていれば固有であるこ
 * とが求められているため、特定の要素にすばやくアクセスする
 * には便利な方法です。
 * ID を持たない要素にアクセスする必要がある場合は、
 * querySelector() で何らかのセレクターを使用して要素を検
 * 索することができます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * Document/getElementById]）
 */

control.addEventListener('change', function(event) {
/** EventTarget.addEventListener()
 * The EventTarget method addEventListener() sets up a 
 * function that will be called whenever the specified 
 * event is delivered to the target. Common targets are
 * Element, Document, and Window, but the target may be 
 * any object that supports events (such as 
 * XMLHttpRequest).
 * addEventListener() works by adding a function or an 
 * object that implements EventListener to the list of 
 * event listeners for the specified event type on the 
 * EventTarget on which it's called.
 * EventTarget.addEventListener() メソッドは、指定された
 * イベントがターゲットに渡されるときにはいつでも呼び出される
 * ファンクションを設定します。一般的なターゲットは、Element、
 * Document、Window ですが、ターゲットは（XMLHttpRequest 
 * のような）イベントをサポートするあらゆるオブジェクトです。
 * addEventListener() は、呼び出される EventTarget の指
 * 定されたイベントタイプためのイベントリスナのリストに 
 * EventListener を実装するファンクション、または、オブジェ
 * クトを追加することによって動作します。
 *（MDN[https://developer.mozilla.org/en-US/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 var value = event.currentTarget.value;
 /** Event.currentTarget
  * The currentTarget read-only property of the Event 
  * interface identifies the current target for the 
  * event, as the event traverses the DOM. It always 
  * refers to the element to which the event handler has 
  * been attached, as opposed to Event.target, which 
  * identifies the element on which the event occurred 
  * and which may be its direct descendent. 
  * Event インターフェイスの currentTarget 読み取り専用プ
  * ロパティは、イベントの現在のターゲットを識別し、そのため
  * イベントは DOM を横断します。Event.target とは対象的に、
  * イベントハンドラが装着されている要素を常に参照します。
  * イベントが発生した要素を識別し、その直接の子孫です。
  *（MDN[https://developer.mozilla.org/en-US/docs/Web/API/
  * Event/currentTarget]）
  */

 if (value === 'iip') {

  layer.setSource(new Zoomify({
  /** setSource(source)
   * Set the layer source.
   * レイヤソースを設定します。
   * （ol5 API）
   */

   url: iipUrl,
   size: [imgWidth, imgHeight],
   crossOrigin: 'anonymous'
  }));
 } else if (value === 'zoomify') {
  layer.setSource(new Zoomify({
   url: zoomifyUrl,
   size: [imgWidth, imgHeight],
   crossOrigin: 'anonymous'
  }));
 }
});

次に index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Zoomify</title>

  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

 </head>
 <body>
  <div id="map"></div>
  <div class="controls">
   <select id="zoomifyProtocol">
    <option value="zoomify">Zoomify</option>
    <option value="iip">IIP</option>
   </select>
  </div>
  <script src="./index.js"></script>
 <body>
</html>

npm start を実行します。

user@deb9-vmw:~/new-project$ npm start

Webブラウザのアドレス欄に

http://localhost:1234

と入力して Enter キーを押します。