2 - ol3.4ex 98b - WMTS example 2

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

「298-ol3ex.js」

var projection = ol.proj.get('EPSG:3857');
// EPSG:900913 -> EPSG:3857 コード名変更（内容は同じ）
/** ol.proj.get(projectionLike)
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * （ol3 API）
 */

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

var size = ol.extent.getWidth(projectionExtent) / 256;
/** ol.extent.getWidth(extent)
 * Return: Width.（ol3 API）
 */

var resolutions = new Array(14);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複
 * 数のデータの集合であり、JavaScript のグローバルオブジェクト 
 * である Array は、高位の、（C言語等で云うところの）「リス
 * ト」の様な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数（arrayLength）に 
 * 0 から 4,294,967,295( 232-1 ) までの整数値を指定する場合
 * その値を要素数とする配列が作成されます。その際に範囲外の値
 * は、を指定した場合には、例外: RangeError がスローされます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array]）
 */

var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
 // generate resolutions and matrixIds arrays for this WMTS
 // この WMTS の解像度と matrixIds 配列の生成。

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

 matrixIds[z] = z;
}

var attribution = new ol.Attribution({
 html: 'Tiles © <a href="http://services.arcgisonline.com/arcgis/rest/' +
  'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({

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

   opacity: 0.7 // 透過度
  }),
  new ol.layer.Tile({
   opacity: 0.7,

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

    attributions: [attribution],

    url: 'http://services.arcgisonline.com/arcgis/rest/' +
     'services/Demographics/USA_Population_Density/MapServer/WMTS/',

    layer: '0',
    matrixSet: 'EPSG:3857',
    format: 'image/png',
    projection: projection,

    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(projectionExtent),
     /** ol.extent.getTopLeft
      * Return: Top left coordinate.
      */

     resolutions: resolutions,

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

    }),
    style: 'default',

    wrapX: true
    /** wrapX:
     * Whether to wrap the world horizontally. Default is 
     * false.
     * 水平に世界を覆うかどうかを設定します。デフォルトはfalse
     * です。
     * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

   })
  })
 ],
 target: 'map',

 controls: ol.control.defaults({
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * （ol3 API）
  */

 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API）
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */

  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ（型）の説明 - 式などで表示
   * （@use JSDoc[http://usejsdoc.org/]より）
    */

   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  center: [-11158582, 4813697],
  zoom: 4
 })
});