2 - ol4.4ex 173b - Tile Transitions 2

「tile-transitions.js（2173-ol4ex.js）」は、マップを表示するための JavaScript ファイルです。


「2173-ol4ex.js」

var url = 'https://{a-c}.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png';

var withTransition = 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. 
 * プリレンダリング（事前描画）を提供するレイヤソースのた
 * めの、特定の解像度でのズームレベルによって編成されてい
 * るグリッドのタイルイメージ。（ol4 API）
 */

 source: new ol.source.XYZ({url: url})
 /** 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 
  * で次のように使用できます。（ol4 API）
  */

 /** url
  * URL template. Must include {x}, {y} or {-y}, and 
  * {z} placeholders. A {?-?} template pattern, for 
  * example subdomain{a-f}.domain.com, may be used 
  * instead of defining each one separately in the 
  * urls option.
  * URLテンプレート。 {x}、{y} または {-y}、と {z} プレー
  * スホルダを含める必要があります。例えば 
  * subdomain{a-f}.domain.com の {?-?} テンプレートパ
  * ターンは、urls オプションでそれぞれを個別に定義する代
  * わりに、使用することができます。（ol4 API）
  */

});

var withoutTransition = new ol.layer.Tile({

 source: new ol.source.XYZ({url: url, transition: 0}),
 /** transition:
  * Duration of the opacity transition for rendering. 
  * To disable the opacity transition, pass 
  * transition: 0.
  * レンダリングのための不透明度遷移のデュレーション（期限）。
  *  不透明度の遷移を無効にするには、transition：0を渡します。
  * （ol4 API）
  */

 visible: false
 /** visible:
  * Visibility. Default is true (visible).（ol4 API）
  */

});

var map = new ol.Map({
 layers: [withTransition, withoutTransition],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2,
  maxZoom: 11
 })
});

document.getElementById('transition').addEventListener('change', function(event) {
/** EventTarget.addEventListener
 * The EventTarget.addEventListener() method adds the 
 * specified EventListener-compatible object to the 
 * list of event listeners for the specified event 
 * type on the EventTarget on which it is called. 
 * The event target may be an Element in a document, 
 * the Document itself, a Window, or any other object 
 * that supports events (such as XMLHttpRequest).
 * EventTarget.addEventListener() メソッドは、指定された
 * EventListener 互換オブジェクトを、呼び出される 
 * EventTarget の指定されたイベントタイプのイベントリスナのリ
 * ストに追加します。イベントターゲットは、ドキュメントの Element、
 * Document 自身、Window、または（XMLHttpRequest などの）
 * イベントをサポートしている他のオブジェクトです。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/EventTarget/addEventListener]）
 */

 var transition = event.target.checked;

 withTransition.setVisible(transition);
 /** setVisible(visible)
  * Set the visibility of the layer (true or false).
  * レイヤの可視性（true または false）を設定します。
  * （ol4 API）
  */

 withoutTransition.setVisible(!transition);
});