2 - ol3.4ex 104b - Limited layer extent 2

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

「2104-ol3ex.js」

function transform(extent) {

 return ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
 /** ol.proj.transformExtent(extent, source, destination)
  * Transforms an extent from source projection to 
  * destination projection. This returns a new extent
  *  (and does not modify the original).
  * ソース投影から変換先投影へ範囲を変換します。これは、新しい
  * 範囲を返します（オリジナルを変更しません）。（ol3 API）
  */

}

var extents = {
 northwest: transform([-180, 0, 0, 85]),
 northeast: transform([0, 0, 180, 85]),
 southeast: transform([0, -85, 180, 0]),
 southwest: transform([-180, -85, 0, 0]),
 world: transform([-180, -85, 180, 85])
};

var base = new ol.layer.Tile({

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

  url: 'http://api.tiles.mapbox.com/v3/' +
      'mapbox.world-black.jsonp',

  crossOrigin: 'anonymous'
  /** CORS(Cross-Origin Resource Sharing) header を設定
   * 参考：HTTP access control (CORS)
   * [https://developer.mozilla.org/ja/docs/
   * HTTP_access_control]
   */

 })
});

var overlay = new ol.layer.Tile({
 extent: extents.northwest,
 source: new ol.source.TileJSON({
  url: 'http://api.tiles.mapbox.com/v3/' +
      'mapbox.world-glass.jsonp',
  crossOrigin: 'anonymous'
 })
});

var map = new ol.Map({
 layers: [base, overlay],

 renderer: exampleNS.getRendererFromQueryString(),
 // 'example-behavior.js' により URL にある renderer を返します

 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 1
 })
});

for (var key in extents) {

 document.getElementById(key).onclick = function(event) {
 /** GlobalEventHandlers.onclick
  * The onclick property returns the click event 
  * handler code on the current element.
  * onclick　プロパティは、現在の要素の click イベント
  * ハンドラのコードを返します。
  * （MDN[https://developer.mozilla.org/en-US/
  * docs/Web/API/GlobalEventHandlers.onclick]）
  */

  overlay.setExtent(extents[event.target.id]);
  /** setExtent(extent)
   * Set the validity extent for this projection.
   * この投影の有効範囲を設定します。（ol3 API）
   */

 };
}