2 - ol3.8ex 127b - Shaded Relief 2

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

/**
 * Generates a shaded relief image given elevation data.  
 * Uses a 3x3 neighborhood for determining slope and aspect.
 * 標高データを与えられた陰影起伏画像を生成します。
 * 傾斜角と傾斜を決定するために3×3の近傍を使用します。
 * @param {Array.} inputs Array of input images.
 * @param {Object} data Data added in the "beforeoperations" event.
 * @return {Array.} Output images (only the first is rendered).
 */

function shade(inputs, data) {
 var elevationImage = inputs[0];
 var width = elevationImage.width;
 var height = elevationImage.height;
 var elevationData = elevationImage.data;

 var shadeData = new Uint8ClampedArray(elevationData.length);
 /** Uint8ClampedArray
  * The Uint8ClampedArray typed array represents an 
  * array of 8-bit unsigned integers clamped to 0-255. 
  * The contents are initialized to 0. Once established, 
  * you can reference elements in the array using the 
  * object's methods, or using standard array index 
  * syntax (that is, using bracket notation).
  * Uint8ClampedArray に分類された配列は、0〜255に固定された
  * 8 ビット符号なし整数の配列を表します。コンテンツは、0に初期
  * 化されます。一度確立されると、オブジェクトメソッドを使用し
  * て、または、標準配列インデックス構文を使用（つまり、ブラケッ
  * ト表記を使用）して、配列内の要素を参照することができます。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Uint8ClampedArray]）
  */

 var dp = data.resolution * 2;
 var maxX = width - 1;
 var maxY = height - 1;
 var pixel = [0, 0, 0, 0];

 var twoPi = 2 * Math.PI;
 /** Math.PI()
  * 円周率。約 3.14159 です。
  * （MDN[https://developer.mozilla.org/ja/docs/Web
  * /JavaScript/Reference/Global_Objects/Math/PI]）
  */

 var halfPi = Math.PI / 2;
 var sunEl = Math.PI * data.sunEl / 180;
 var sunAz = Math.PI * data.sunAz / 180;

 var cosSunEl = Math.cos(sunEl);
 /** Math.cos()
  * 引数として与えた数のコサインを返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/cos]）
  */

 var sinSunEl = Math.sin(sunEl);
 /** Math.sin()
  * 引数として与えた数のサイン（正弦）を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/sin]）
  */

 var pixelX, pixelY, x0, x1, y0, y1, offset,
  z0, z1, dzdx, dzdy, slope, aspect, cosIncidence, scaled;

 for (pixelY = 0; pixelY <= maxY; ++pixelY) {
  y0 = pixelY === 0 ? 0 : pixelY - 1;
  y1 = pixelY === maxY ? maxY : pixelY + 1;
  for (pixelX = 0; pixelX <= maxX; ++pixelX) {
   x0 = pixelX === 0 ? 0 : pixelX - 1;
   x1 = pixelX === maxX ? maxX : pixelX + 1;

   // determine elevation for (x0, pixelY)
   // (x0, pixelY)に対する標高を決定します。
   offset = (pixelY * width + x0) * 4;
   pixel[0] = elevationData[offset];
   pixel[1] = elevationData[offset + 1];
   pixel[2] = elevationData[offset + 2];
   pixel[3] = elevationData[offset + 3];
   z0 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

   // determine elevation for (x1, pixelY)
   // (x1, pixelY)に対する標高を決定します。
   offset = (pixelY * width + x1) * 4;
   pixel[0] = elevationData[offset];
   pixel[1] = elevationData[offset + 1];
   pixel[2] = elevationData[offset + 2];
   pixel[3] = elevationData[offset + 3];
   z1 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

   dzdx = (z1 - z0) / dp;

   // determine elevation for (pixelX, y0)
   // (pixelX, y0)に対する標高を決定します。
   offset = (y0 * width + pixelX) * 4;
   pixel[0] = elevationData[offset];
   pixel[1] = elevationData[offset + 1];
   pixel[2] = elevationData[offset + 2];
   pixel[3] = elevationData[offset + 3];
   z0 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

   // determine elevation for (pixelX, y1)
   // (pixelX, y1)に対する標高を決定します。
   offset = (y1 * width + pixelX) * 4;
   pixel[0] = elevationData[offset];
   pixel[1] = elevationData[offset + 1];
   pixel[2] = elevationData[offset + 2];
   pixel[3] = elevationData[offset + 3];
   z1 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);

   dzdy = (z1 - z0) / dp;

   slope = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy));
   /** Math.atan()
    * 引数として与えた数のアークタンジェントをラジアン単位で返
    * します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/Math/atan]）
    */

   /** Math.sqrt()
    * 引数として与えた数の平方根を返します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/Math/sqrt]）
    */

   aspect = Math.atan2(dzdy, -dzdx);
   /** Math.atan2()
    * 引数の比率でのアークタンジェントを返します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/Math/atan2]）
    */

   if (aspect < 0) {
    aspect = halfPi - aspect;
   } else if (aspect > halfPi) {
    aspect = twoPi - aspect + halfPi;
   } else {
    aspect = halfPi - aspect;
   }

   cosIncidence = sinSunEl * Math.cos(slope) +
    cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect);

   offset = (pixelY * width + pixelX) * 4;
   scaled = 255 * cosIncidence;
   shadeData[offset] = scaled;
   shadeData[offset + 1] = scaled;
   shadeData[offset + 2] = scaled;
   shadeData[offset + 3] = elevationData[offset + 3];
  }
 }             
 return new ImageData(shadeData, width, height);
}

var elevation = new ol.source.XYZ({
/** ol.source.XYZ
 * Layer source for tile data with URLs in a set XYZ 
 * format.
 * セットXYZ形式のURLを持つタイルデータのレイヤソース。
 * （ol3 API）
 */

 url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',

 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[説明は Stable Only のチェックを外すと表示]）
 */

 sources: [elevation],
 operationType: 'image',

 operation: shade
 /** 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[説明は Stable Only のチェックを外すと表示]）
  */

});

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.TileJSON({
   /** ol.source.TileJSON 
    * Layer source for tile data in TileJSON format.
    * TileJSON フォーマットのタイルデータのためのレイヤソース。
    *（ol3 API）
    */

    url: 'http://api.tiles.mapbox.com/v3/tschaub.miapgppd.jsonp'
   })
  }),

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

   opacity: 0.3,
   source: raster
  })
 ],
 view: new ol.View({
  extent: [-13675026, 4439648, -13580856, 4580292],
  center: [-13615645, 4497969],
  minZoom: 10,
  maxZoom: 16,
  zoom: 13
 })
});

var controlIds = ['vert', 'sunEl', 'sunAz'];
var controls = {};

controlIds.forEach(function(id) {
/** forEach(f, opt_this)
 * Iterate over each element, calling the provided 
 * callback.
 * 提供されたコールバックを呼び出すため、各要素を反復処理しま
 * す。（ol3 API）
 */

 var control = document.getElementById(id);
 var output = document.getElementById(id + 'Out');

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

  output.innerText = control.value;

  raster.changed();
  /** changed()
   * Increases the revision counter and dispatches a 0
   * 'change' event.
   * リビジョンカウンタを増加し、「change」イベントを送出します。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

 });
 output.innerText = control.value;
 controls[id] = control;
});

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

 // the event.data object will be passed to operations
 // event.data オブジェクトが operation に渡されます。
 var data = event.data;
 data.resolution = event.resolution;
 for (var id in controls) {

  data[id] = Number(controls[id].value);
  /** Number 
   * The Number JavaScript object is a wrapper object 
   * allowing you to work with numerical values. A Number 
   * object is created using the Number() constructor.
   * Number JavaScriptオブジェクトは、数値で作業することを
   * 可能にする wrapper オブジェクトです。 Numberオブジェク
   * トは、Number() コンストラクタを使用して作成されます。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Number]）
   */

 }
});