2 - ol3.7ex 124b - IGN WMTS example 2

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

「2124-ol3ex.js」

var map = new ol.Map({
 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({
  zoom: 5,

  center: ol.proj.transform([5, 45], 'EPSG:4326', 'EPSG:3857')
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します（オリジナルを変更しません）。（ol3 API）
   */

 })
});

var resolutions = [];
var matrixIds = [];

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

var maxResolution = ol.extent.getWidth(proj3857.getExtent()) / 256;
/** ol.extent.getWidth(extent)
 * Return: Width.（ol3 API）
 */

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

for (var i = 0; i < 18; i++) {
 matrixIds[i] = i.toString();
 /** Number.prototype.toString( [ radix ] )
  * 指定された Number オブジェクトを表す 文字列を返します。
  * radix: 数値を表すために使われる基数を指定する、2 から 
  * 36 までの整数。省略したときは 10。
  * MDN（[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Number/toString]）
  */

 resolutions[i] = maxResolution / 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: [-20037508, 20037508],
 resolutions: resolutions,
 matrixIds: matrixIds
});

// API key valid for 'openlayers.org' and 'localhost'.
// API キーは、'openlayers.org' と 'localhost' に対して有効です。
// Expiration date is 06/29/2018.
var key = '2mqbg0z6cx7ube8gsou10nrt';

var ign_source = new ol.source.WMTS({
 url: 'http://wxs.ign.fr/' + key + '/wmts',
 layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
 matrixSet: 'PM',
 format: 'image/jpeg',
 projection: 'EPSG:3857',
 tileGrid: tileGrid,
 style: 'normal',

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

  html: '<a href="http://www.geoportail.fr/" target="_blank">' +
        '<img src="http://api.ign.fr/geoportail/api/js/latest/' +
        'theme/geoportal/img/logo_gp.gif"></a>'

 })]
});

var ign = 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: ign_source
});

map.addLayer(ign);