2 - ol3.2ex 69b -Teleport example 2

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

「269-ol3ex.js」

var map = new ol.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: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  })
 ],

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

 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: [0, 0],
  zoom: 2
 })
});

map.setTarget('map1');
/** setTarget(target)
 * Sets the layergroup of this map.
 * このマップのレイヤグループを設定します。（ol3 API）
 */

var teleportButton = document.getElementById('teleport');

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

 var target = map.getTarget() === 'map1' ? 'map2' : 'map1';
  /** getTarget()
   * Get the target in which this map is rendered. 
   * Note that this returns what is entered as an option or  
   * in setTarget: if that was an element, it returns an 
   * element; if a string, it returns that.
   * レンダリングされたこのマップのターゲットを取得します。
   * これはオプションとして、または setTarget に入力されている
   * ものを返すことに注意してください：それが要素ならば、要素
   * を返します。文字列ならば、それを返します。（ol3 API）
   */

 /** 条件演算子 condition ? expr1 : expr2 
  * condition: true か false かを評価する条件文です。
  * expr1, expr2: 各々の値の場合に実行する式です。
  * condition が true の場合、演算子は expr1 の値を選択します。
  * そうでない場合は expr2 の値を選択します。
  * （MDN[https://developer.mozilla.org/ja/docs/JavaScript/
  * Reference/Operators/Conditional_Operator]）
  */

  map.setTarget(target);
}, false);