「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 キーを押します。
