2 - ol3.16ex 156b - Reusable Source 2

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

「2156-ol3ex.js」

var urls = [
 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png',
 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png',
 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png',
 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png'
];

var source = new ol.source.XYZ();
/** ol.source.XYZ
 * Layer source for tile data with URLs in a set XYZ 
 * format that are defined in a URL template. By 
 * default, this follows the widely-used Google grid 
 * where x 0 and y 0 are in the top left. Grids like 
 * TMS where x 0 and y 0 are in the bottom left can 
 * be used by using the {-y} placeholder in the URL 
 * template, so long as the source does not have a 
 * custom tile grid. In this case, ol.source.TileImage 
 * can be used with a tileUrlFunction such as:
 *
 * tileUrlFunction: function(coordinate) { 
 *  return 'http://mapserver.com/' 
 *  + coordinate[0] + '/' 
 *  + coordinate[1] + '/' 
 *  + coordinate[2] + '.png'; }
 * 
 * URL テンプレートで定義されているセット XYZ 形式の URL 
 * を持つタイルデータのレイヤソース。デフォルトでは、これは、
 * x0 と y0 が左上にある広く使用されている Google のグリッド
 * に従います。x0 と y0 が左下にある TMS のようなグリッドは、
 * ソースがカスタムタイルグリッドを持っていない限り、URL　テ
 * ンプレートに {-y} プレースホルダを使用して使用することが
 * できます。この場合、ol.source.TileImage は tileUrlFunction 
 * で次のように使用できます。（ol3 API）
 */

var map = new ol.Map({
 target: 'map',
 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: source
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

function updateUrl(index) {
 source.setUrl(urls[index]);

 /** setUrl(url)
  * Set the URL to use for requests.
  * 要求に使用する URL を設定します。（ol3 API）
  */

}

var buttons = document.getElementsByClassName('switcher');
/** getElementsByClassName
 * 与えられたクラス名で得られる要素の集合を返します。document 
 * オブジェクトで呼び出されたときは、ルートノードを含む、完全な
 * 文書が検索されます。任意の要素で getElementsByClassName 
 * を呼び出すこともできます。その場合は、与えられたクラス名を持
 * つ指定されたルート要素下の要素だけが返ります。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * API/Document/getElementsByClassName]）
 */

for (var i = 0, ii = buttons.length; i < ii; ++i) {
 var button = buttons[i];

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

 /** Function.prototype.bind()
  * The bind() method creates a new function that, when 
  * called, has its this keyword set to the provided 
  * value, with a given sequence of arguments preceding 
  * any provided when the new function is called.
  * bind() メソッドは、呼び出されたときに、新しい関数が呼び出され
  * るときに提供される前に与えられる引数の配列と共に、提供される
  * 値に設定される this キーワードを持つ新しい関数を作成します。
  *（MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Function/bind]）
  */

}

updateUrl(0);