「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]） */
} });
