2 - ol3.20ex 164b - Sea Level 2

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

「2164-ol3ex.js」

function flood(pixels, data) {
 var pixel = pixels[0];

 if (pixel[3]) {
  var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);

  if (height <= data.level) {
   pixel[0] = 145;
   pixel[1] = 175;
   pixel[2] = 186;
   pixel[3] = 255;
  } else {
   pixel[3] = 0;
  }
 }
 return pixel;
}

var key = 'pk.eyJ...（省略）';

var elevation = 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）
 */

 url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
 /** 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 オプションでそれぞれを個別に定義する代
  * わりに、使用することができます。（ol3 API）
  */

 crossOrigin: 'anonymous'
 /** crossOrigin:
  * The crossOrigin attribute for loaded images. Note 
  * that you must provide a crossOrigin value if you 
  * are using the WebGL renderer or if you want to 
  * access pixel data with the Canvas renderer. See 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image for more detail.
  * ロードされたイメージの crossOrigin属性。WebGLのレンダ
  * ラーを使用している場合、または、キャンバスレンダラでピ
  * クセルデータにアクセスする場合、crossOrigin 値を提供な
  * ければならないことに注意してください。詳細は 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image を参照してください。（ol3 API）
  */

});

var raster = new ol.source.Raster({
/** ol.source.Raster
 * A source that transforms data from any number of input 
 * sources using an array of ol.raster.Operation functions 
 * to transform input pixel values into output pixel values.
 * 入力画素値を出力画素値に変換するために ol.raster.Operation
 * 関数の配列を使用して、任意の数の入力ソースからデータを変換す
 * るソース。
 * （ol3 API [experimental]）
 */

 sources: [elevation],

 operation: flood
 /** operation
 * Raster operation. The operation will be called with data 
 * from input sources and the output will be assigned to the
 * raster source.
 * ラスタオペレーション。operation は入力ソースからデータととも
 * に呼び出され、出力データはラスタ·ソースに割り当てられます。
 * （ol3 API [experimental]）
 */

});

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: new ol.source.XYZ({
    url: 'https://api.mapbox.com/styles/v1/tschaub/ciutc102t00c62js5fqd47kqw/tiles/256/{z}/{x}/{y}?access_token=' + key
   })
  }),

  new ol.layer.Image({
 /** ol.layer.Image
  * Server-rendered images that are available for arbitrary
  * extents and resolutions.
  * 任意の範囲と解像度で利用可能なサーバで描画されたイメージ。
  * （ol3 API）
  */

   opacity: 0.6,
   source: raster
  })
 ],
 view: new ol.View({

  center: ol.proj.fromLonLat([-122.3267, 37.8377]),
  /** ol.proj.fromLonLat(coordinate, opt_projection)
   * Transforms a coordinate from longitude/latitude to a 
   * different projection.
   * 緯度/経度座標から異なる投影に変換します。（ol3 API）
   */

  zoom: 11
 })
});

var control = document.getElementById('level');
var output = document.getElementById('output');

control.addEventListener('input', function() {
/** EventTarget.addEventListener
 * The EventTarget.addEventListener() method registers 
 * the specified listener on the EventTarget it's called 
 * on. 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() メソッドは、それが呼び
 * 出される EventTarget に指定されたリスナを登録します。イベ
 * ントターゲットは、ドキュメントの Element、Document 自身、
 * Window、または（XMLHttpRequest などの）イベントをサポート
 * している他のオブジェクトです。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/EventTarget/addEventListener]）
 */

 output.innerText = control.value;

 raster.changed();
 /** changed()
  * Increases the revision counter and dispatches a 
  * 'change' event.
  * リビジョンカウンタを増加し、「change」イベントを送出します。
  * （ol3 API[experimental]）
  */

});
output.innerText = control.value;

raster.on('beforeoperations', function(event) {
/**　on(type, listener, opt_this)
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */

 event.data.level = control.value;
});

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

for (var i = 0, ii = locations.length; i < ii; ++i) {
 locations[i].addEventListener('click', relocate);
}

function relocate(event) {

 var data = event.target.dataset;
 /** Event.target
  * A reference to the object that dispatched the event. 
  * It is different from event.currentTarget when the 
  * event handler is called during the bubbling or 
  * capturing phase of the event.
  * イベントをディスパッチしたオブジェクトへの参照です。 イベント
  * のバブリングまたはキャプチャフェーズでイベントハンドラが呼び
  * 出されたときは、event.currentTarget　と異なります。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/Event/target]）
  */

 /** HTMLElement.dataset
  * The HTMLElement.dataset property allows access, both 
  * in reading and writing mode, to all the custom data 
  * attributes (data-*) set on the element, either in 
  * HTML or in the DOM.  It is a map of DOMString, one 
  * entry for each custom data attribute.  Note that the 
  * dataset property itself can be read, but not directly 
  * written.  Instead, all writes must be to its 
  * "properties", which in turn represent the data 
  * attributes.
  * HTMLElement.datasetプロパティを使用すると、読み取りモード
  * と書き込みモードの両方で、HTMLまたはDOMのいずれかの要素に設定
  * されているすべてのカスタムデータ属性（data- *）にアクセスでき
  * ます。 DOMString のマップで、各カスタムデータ属性のエントリで
  * す。 データセットプロパティ自体は読み込めますが、直接書き込む
  * ことはできません。 その代わりに、すべての書き込みはデータ属性
  * を表す「プロパティ」にする必要があります。   
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * API/HTMLElement/dataset]）
  */

 var view = map.getView();
 /** getView()
  * Get the view associated with this map. A view 
  * manages properties such as center and resolution.
  * このマップと関連するビューを取得します。ビューは、
  * 中心や解像度のような属性を管理します。
  * Return: The view that controls this map.（ol3 API）
  */

 view.setCenter(ol.proj.fromLonLat(data.center.split(',').map(Number)));
 /** setCenter()
  * Set the center of the current view.
  * 現在のビューの中心を設定します。（ol3 API）
  */

 /** Number
  * Number JavaScript オブジェクトは、数値に作用するラッパー
  * オブジェクトです。Number オブジェクトは、Number() コンスト
  * ラクタを用いて生成します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Number]）
  */

 view.setZoom(Number(data.zoom));
 /** setZoom(zoom)
  * Zoom to a specific zoom level.
  * 指定したズームレベルにズームします。（ol3 API）
  */

}