2 - ol3.3ex 97b - Layer Swipe example 2

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

「297-ol3ex.js」

var osm = new ol.layer.Tile({,

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

});

var bing = new ol.layer.Tile({

 source: new ol.source.BingMaps({
 /** ol.source.BingMaps
  * Layer source for Bing Maps tile data.
  * Bing Maps タイルデータのレイヤソース。（ol3 API）
  */

  key: 'Ak-dzM...（省略）',
  imagerySet: 'Aerial'
 })
});

var map = new ol.Map({
 layers: [osm, bing],
 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: [0, 0],
  zoom: 2
 })
});

var swipe = document.getElementById('swipe');

bing.on('precompose', function(event) {
/** on()
 * Listen for a certain type of event.
 * Returns: Unique key for the listener.（ol3 API）
 */

/** precompose　イベント
 * レイヤを描画する前に発生するイベント。
 * （「Layer spy example」参照）
 */

 var ctx = event.context;
 /** context{CanvasRenderingContext2D} 
  * Canvas context. Only available when a Canvas 
  * renderer is used, null otherwise.
  * canvas context。キャンバスレンダラを使用する場合に
  * だけ利用でき、そうでない場合は、null。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 var width = ctx.canvas.width * (swipe.value / 100);
 /** HTMLCanvasElement.width
  * The HTMLCanvasElement.width property is a positive 
  * integer reflecting the width HTML attribute of 
  * the <canvas> element interpreted in CSS pixels. 
  * When the attribute is not specified, or if it is 
  * set to an invalid value, like a negative, the 
  * default value of 300 is used.
  * HTMLCanvasElement.width プロパティは CSS ピクセル
  * で解釈された <canvas> 要素の幅 HTML 属性を反映
  * する正の整数です。属性が指定されていない場合、または、
  * 負の値のように無効な値に設定されている場合、デフォルト
  * 値 300 が使用されます。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/HTMLCanvasElement/width]）
  */

 ctx.save();
 /** CanvasRenderingContext2D.save()
  * The CanvasRenderingContext2D.save() method of the 
  * Canvas 2D API saves the entire state of the canvas 
  * by pushing the current state onto a stack.
  * Canvas 2D API の CanvasRenderingContext2D.save（）
  * メソッドは、スタック上に現在の状態を最後に追加するこ
  * とにより、キャンバスの状態全体を保存します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/CanvasRenderingContext2D/save]）
  */

 ctx.beginPath();
 /** CanvasRenderingContext2D.beginPath()
  * The CanvasRenderingContext2D.beginPath() method of 
  * the Canvas 2D API starts a new path by emptying the 
  * list of sub-paths. Call this method when you want 
  * to create a new path.
  * Canvas 2D API の CanvasRenderingContext2D.beginPath（）
  * メソッドは、サブパスのリストを空にすることによって新しいパ
  * スを開始します。新しいパスを作成する場合、このメソッドを呼
  * び出します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/CanvasRenderingContext2D/beginPath]）
  */

 ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
 /** CanvasRenderingContext2D.rect()
  * The CanvasRenderingContext2D.rect() method of the 
  * Canvas 2D API creates a path for a rectangle at 
  * position (x, y) with a size that is determined by 
  * width and height. Those four points are connected 
  * by straight lines and the sub-path is marked as 
  * closed, so that you can fill or stroke this rectangle.
  * Canvas 2D APIのCanvasRenderingContext2D.rect（）
  * メソッドは、幅と高さによって決定される大きさと位置
  * （x、y）の矩形のためのパスを作成します。それらの4つ
  * のポイントが直線で接続され、および、サブパスは閉じた
  * ものとしてマークされ、それによりこの矩形を埋めるか、
  * 線を引くことができます。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/CanvasRenderingContext2D/rect]）
  */

 ctx.clip();
 /** CanvasRenderingContext2D.clip()
  * The CanvasRenderingContext2D.clip() method of the 
  * Canvas 2D API turns the path currently being built 
  * into the current clipping path.
  * Canvas 2D API の CanvasRenderingContext2D.clip（）
  * メソッドは、現在組み込まれているパスを現在のクリッピン
  * グパスに置き換えます。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/CanvasRenderingContext2D/clip]）
  */

});

bing.on('postcompose', function(event) {
/** postcompose　イベント
 * レイヤを描画した後に発生するイベント。
 * （「Layer spy example」参照）
 */

 var ctx = event.context;

 ctx.restore();
 /** CanvasRenderingContext2D.restore()
  * The CanvasRenderingContext2D.restore() method of 
  * the Canvas 2D API restores the most recently 
  * saved canvas state by popping the top entry in 
  * the drawing state stack. If there is no saved 
  * state, this method does nothing.
  * Canvas 2D API の CanvasRenderingContext2D.restore（）
  * メソッドは、描画状態のスタックの一番上のエントリを抜き
  * 出すことによって、最後に保存されたキャンバスの状態を復
  * 元します。全く保存された状態が存在しない場合、このメソッ
  * ドは何もしません。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/CanvasRenderingContext2D/restore]）
  */

});

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

 map.render();
 /** render()
  * Requests a render frame; rendering will effectively occur
  * at the next browser animation frame.
  * レンダーフレームをを要求します。すなわち、レンダリングは、
  * 次のブラウザのアニメーションフレームで、効果的に発生します。
  * （ol3 API）
  */

}, false);