2 - ol3.12ex 142b - WMTS Tile Transitions 2

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

「2142-ol3ex.js」

// create the WMTS tile grid in the google projection
// google 投影法で WMTS タイルグリッドを作成します

var projection = ol.proj.get('EPSG:3857');
/** ol.proj.get(projectionLike)
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション・オブジェクトを取得。
 * （ol3 API）
 * projectionLike
 * Either a code string which is a combination of authority 
 * and identifier such as "EPSG:4326", or an existing p
 * rojection object, or undefined.
 * 「EPSG：4326」のように権限と識別子の組み合わせのコード文字列、
 * または、既存の投影オブジェクト、または、未定義のいずれか。
 */

var tileSizePixels = 256;

var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels;
/** ol.extent.getWidth(extent)
 * Return: Width.（ol3 API）
 */

/** getExtent()
 * Get the validity extent for this projection.
 * この投影の有効範囲を取得。（ol3 API）
 */

var matrixIds = [];
var resolutions = [];
for (var i = 0; i <= 14; i++) {
 matrixIds[i] = i;

 resolutions[i] = tileSizeMtrs / Math.pow(2, i);
 /** Math.pow(base, exponent)
  * base を exponent 乗した値、つまり、base^exponent の
  * 値を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/pow]）
  */

}

var tileGrid = new ol.tilegrid.WMTS({
/** ol.tilegrid.WMTS
 * Set the grid pattern for sources accessing WMTS 
 * tiled-image servers.
 * WMTSタイル画像サーバにアクセスするソースのグリッドパターン
 * を設定（ol3 API）
 */

 origin: ol.extent.getTopLeft(projection.getExtent()),
 /** origin:
  * The tile grid origin, i.e. where the x and y axes meet 
  * ([z, 0, 0]). Tile coordinates increase left to right 
  * and upwards. If not specified, extent or origins must 
  * be provided.
  * タイルグリッドの原点（origin）、すなわちx軸とy軸が交わる
  * 場所（[Z、0、0]）。タイル座標は左から右へと上方へ増加しま
  * す。指定しない場合、範囲または origins が提供されなければ
  * なりません。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 /** ol.extent.getTopLeft
  * Return: Bottom left coordinate.
  */

 resolutions: resolutions,
 /** resolutions:
  * Resolutions. The array index of each resolution needs 
  * to match the zoom level. This means that even if a 
  * minZoom is configured, the resolutions array will have 
  * a length of maxZoom + 1.
  * 解像度。各解像度の配列インデックスは、ズームレベルに一致す
  * る必要があります。これは minZoom が設定されている場合でも、
  * 解像度アレイは、maxZoom+1 の長さを有することを意味します。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 matrixIds: matrixIds
 /** matrixIds
  * matrix IDs. The length of this array needs to match 
  * the length of the resolutions array.
  * 行列のID。この配列の長さは、解像度配列の数と一致する必要
  * があります。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

});

var scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';

var wmtsSource = new ol.source.WMTS({
/** ol.source.WMTS
 * Layer source for tile data from WMTS servers.
 * WMTSサーバからタイルデータのレイヤソース。（ol3 API）
 */

 url: 'http://ts2.scalgo.com/global/wmts?token=' + scalgoToken,
 /** url:
  * A URL for the service. For the RESTful request 
  * encoding, this is a URL template. For KVP encoding, 
  * it is normal URL. A {?-?} template pattern, for 
  * example subdomain{a-f}.domain.com, may be used i
  * nstead of defining each one separately in the urls 
  * option.
  * サービスのURL。 RESTful リクエストエンコーディングに対
  * して、これはURLテンプレートです。 KVPエンコーディングに
  * 対して、通常のURLです。 {?- ?}テンプレートパターン、たと
  * えば subdomain{a-f}.domain.com は、urls オプション
  * でそれぞれを個別に定義する替りに使用することができます。
  * （ol3 API）
  */

 layer: 'hydrosheds:sea-levels',
 /** layer:
  * Layer name as advertised in the WMTS capabilities. 
  * Required.
  * WMTS capabilities でアドバタイズとしてのレイヤ名。必須。
  * （ol3 API）
  */

 format: 'image/png',
 /**format:
  * Image format. Default is image/jpeg.（ol3 API）
  */

 matrixSet: 'EPSG:3857',
 /** Matrix 
  * Matrix set. Required.（ol3 API）
  */

 attributions: [

  new ol.Attribution({
  /** ol.Attribution
   * An attribution for a layer source.
   * レイヤソースの属性（ol3 API）
   */

   html: '<a href="http://scalgo.com">SCALGO</a>'
  }),

  new ol.Attribution({
   html: '<a href="http://www.cgiar-csi.org/data/' +
    'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>'

  })
 ],
 tileGrid: tileGrid,

 style: 'default',
 /** style:
  * Style name as advertised in the WMTS capabilities. 
  * Required.
  * WMTS  capabilities で　advertised（？）としての style 
  * 名。（ol3 API）
  */

 dimensions: {
 /** dimensions:
  * Additional "dimensions" for tile requests. This is an 
  * object with properties named like the advertised WMTS 
  * dimensions.
  * タイル要求に対する追加の「dimensions」。これは、advertised 
  * WMTS dimensions のような名前のプロパティを持つオブジェクト
  * です。（ol3 API）
  */

  'threshold': 100
 }
});

var map = new ol.Map({
 target: 'map',
 view: new ol.View({
  projection: projection,
  center: [-9871995, 3566245],
  zoom: 6
 }),
 layers: [

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

   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  }),
  new ol.layer.Tile({
   opacity: 0.5,
   source: wmtsSource
  })
 ]
});

var updateSourceDimension = function(source, sliderVal) {

 source.updateDimensions({'threshold': sliderVal});
 /** updateDimensions(dimensions)
  * Update the dimensions.
  * dimensions を更新します。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
};

updateSourceDimension(wmtsSource, 10);

document.getElementById('slider').addEventListener('input',

 function() {
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *（MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 updateSourceDimension(wmtsSource, this.value);
});