2 - ol3.4ex 110b - Zoomify example 2

「zoomify.js（2110-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

Zoomify は、

Zoomify
http://www.zoomify.com/

に、次のようにあります。

Zoomify makes high-quality images of any size zoom-and-pan for fast, interactive viewing on the web. Just HTML, JPEGs, and a small JavaScript file — use it on any website and view it anywhere.
Zoomify は、高速な任意のサイズのズームとパンで高品質な画像をWeb上でインタラクティブに表示します。適切な HTML、JPEG ファイル、および小さい JavaScript ファイルは - すべてのウェブサイト上でそれを使用し、どこでもそれを表示します。

「2110-ol3ex.js」

/** This server does not support CORS, and so is incompatible
 * with WebGL.
 * このサーバは、CORS をサポートしていません。それで、WebGL と共
 * に実行できません。
 */

//var imgWidth = 8001;
//var imgHeight = 6943;
//var url = 'http://mapy.mzk.cz/AA22/0103/';
//var crossOrigin = undefined;

var imgWidth = 9911;
var imgHeight = 6100;

var url = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
 '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';

var crossOrigin = 'anonymous';

var imgCenter = [imgWidth / 2, - imgHeight / 2];

/** Maps always need a projection, but Zoomify layers are 
 * not geo-referenced, and are only measured in pixels.  
 * So, we create a fake projection that the map can use to 
 * properly display the layer.
 * マップは常に投影が必要ですが、Zoomify レイヤは地理参照ではな
 * く、ピクセルで測定されるだけです。そこで、マップが適切にレイ
 * ヤーを表示するために使用できる偽の投影を作成します。
 */

var proj = new ol.proj.Projection({
/** ol.proj.Projection
 * Projection definition class. One of these is created 
 * for each projection supported in the application and 
 * stored in the ol.proj namespace. You can use these in 
 * applications, but this is not required, as API params 
 * and options use ol.proj.ProjectionLike which means the 
 * simple string code will suffice.
 * 投影定義クラス。これらの一つは、アプリケーションでサポートさ
 * れ、ol.proj名前空間に格納されている各投影に対して作成されま
 * す。アプリケーションでこれらを使用することができますが、API 
 * のパラメータとオプションは、単純な文字列コードが有能であるこ
 * とを意味する ol.proj.ProjectionLike を使用するので、これは
 * 必要ありません。（ol3 API）
 */

 code: 'ZOOMIFY',
 /** code
  * The SRS identifier code, e.g. EPSG:4326.（ol3 API）
  */

 units: 'pixels',
 /** units
  * Units. Required unless a proj4 projection is defined 
  * for code.
  * units。もし、proj4 プロジェクションがコードとして定義されてい
  * なければ必要です。（ol3 API）
  */

 extent: [0, 0, imgWidth, imgHeight]
 /** extent
  * The validity extent for the SRS.
  * SRS の有効範囲。（ol3 API）
  */

});

var source = new ol.source.Zoomify({
/** ol.source.Zoomify
 * Layer source for tile data in Zoomify format.
 * Zoomify フォーマットのタイルデータのレイヤソース。（ol3 API）
 */

 url: url,
 size: [imgWidth, imgHeight],

 crossOrigin: crossOrigin
 /** crossOrigin
  * 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のレンダラー
  * を使用している場合、または、キャンバスレンダラでピクセルデー
  * タにアクセスする場合、crossOrigin 値を提供なければならない
  * ことに注意してください。詳細は 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image を参照してください。（ol3 API）
  */

});

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   source: source
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
// 'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  projection: proj,
  center: imgCenter,

zoom: 0,

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

  extent: [0, -imgHeight, imgWidth, 0]
 })
});