「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 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 拡張でインターネットイメージプロトコルも取り扱えます。
Zoomify は、高解像度画像にする深いズームのフォーマットです。この例はピクセル投影法で Zoomify ソースを使用する方法を示しています。JTL 拡張でインターネットイメージプロトコルも取り扱えます。
次の内容で index.js を作成します。
user@deb9-vmw:~/new-project$ vim index.js
次に index.html を作成します。
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'
}));
}
});
user@deb9-vmw:~/new-project$ vim index.html
npm start を実行します。<!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>
user@deb9-vmw:~/new-project$ npm start
Webブラウザのアドレス欄に
http://localhost:1234
と入力して Enter キーを押します。
