「2133-ol3ex.js」
/** * Color manipulation functions below are adapted from * https://github.com/d3/d3-color. * カーラーマニピュレーション関数は、以下から適応されています。 * https://github.com/d3/d3-color。 */
var Xn = 0.950470; var Yn = 1; var Zn = 1.088830; var t0 = 4 / 29; var t1 = 6 / 29; var t2 = 3 * t1 * t1; var t3 = t1 * t1 * t1;
var twoPi = 2 * Math.PI; /** Math.PI() * 円周率。約 3.14159 です。 * （MDN[https://developer.mozilla.org/ja/docs/Web * /JavaScript/Reference/Global_Objects/Math/PI]） */
/**
* Convert an RGB pixel into an HCL pixel.
* RGB ピクセルを HCL ピクセルに変換します。
* @param {ol.raster.Pixel} pixel A pixel in RGB space.
* @return {ol.raster.Pixel} A pixel in HCL space.
*/
/** 「@param」 * The @param tag provides the name, type, and * description of a function parameter. * The @param tag requires you to specify the name of * the parameter you are documenting. You can also * include the parameter's type, enclosed in curly * brackets, and a description of the parameter. * @paramタグは、関数パラメータの名前と型、説明を提供します。 * @paramタグを使用すると、文書化されたパラメータの名前を * 指定する必要があります。また、パラメータのタイプと、中括弧 * で囲まれたおよびパラメータの説明を含めることができます。 * （@use JSDoc [http://usejsdoc.org/tags-param.html]） */
/** @return（@returns と同義） * The @returns tag documents the value that a function * returns. * @returns タグは、関数が返す値について説明します。 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]） */
function rgb2hcl(pixel) {
var red = rgb2xyz(pixel[0]);
var green = rgb2xyz(pixel[1]);
var blue = rgb2xyz(pixel[2]);
var x = xyz2lab( (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn); var y = xyz2lab( (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn); var z = xyz2lab( (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);
var l = 116 * y - 16; var a = 500 * (x - y); var b = 200 * (y - z);
var c = Math.sqrt(a * a + b * b); /** Math.sqrt() * 引数として与えた数の平方根を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/sqrt]） */
var h = Math.atan2(b, a); /** Math.atan2() * 引数の比率でのアークタンジェントを返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/atan2]） */
if (h < 0) {
h += twoPi;
}
pixel[0] = h;
pixel[1] = c;
pixel[2] = l;
return pixel;
}
/**
* Convert an HCL pixel into an RGB pixel.
* HCL ピクセルを RGB ピクセルに変換します。
* @param {ol.raster.Pixel} pixel A pixel in HCL space.
* @return {ol.raster.Pixel} A pixel in RGB space.
*/
function hcl2rgb(pixel) {
var h = pixel[0];
var c = pixel[1];
var l = pixel[2];
var a = Math.cos(h) * c; /** Math.cos() * 引数として与えた数のコサインを返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/cos]） */
var b = Math.sin(h) * c; /** Math.sin() * 引数として与えた数のサイン（正弦）を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/sin]） */
var y = (l + 16) / 116;
var x = isNaN(a) ? y : y + a / 500; /** Number.isNaN() * 引数として与えた数がNaNかどうかの真偽値を返します。 オリジ * ナルのisNaN()グローバルメソッドのより堅牢なバージョンです。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Number/isNaN]） */
/** 条件演算子 condition ? expr1 : expr2 * condition: true か false かを評価する条件文です。 * expr1, expr2: 各々の値の場合に実行する式です。 * condition が true の場合、演算子は expr1 の値を選択します。 * そうでない場合は expr2 の値を選択します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Guide/Expressions_and_Operators]） */
var z = isNaN(b) ? y : y - b / 200; y = Yn * lab2xyz(y); x = Xn * lab2xyz(x); z = Zn * lab2xyz(z);
pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); pixel[1] = xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z); pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
return pixel; }
function xyz2lab(t) {
return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
}
function lab2xyz(t) {
return t > t1 ? t * t * t : t2 * (t - t0);
}
function rgb2xyz(x) {
return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4); /** Math.pow(base, exponent) * base を exponent 乗した値、つまり、base^exponent の値を返 * します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/pow]） */
}
function xyz2rgb(x) {
return 255 * (x <= 0.0031308 ?
12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
}
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: [new ol.source.Stamen({
/** ol.source.Stamen
* Layer source for the Stamen tile server.
* Stamen タイルサーバのレイヤソース。（ol3 API）
* （2 - ol3ex 24b - Stamen example 1 参照）
*/
layer: 'watercolor' })],
operation: function(pixels, data) {
/** 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 hcl = rgb2hcl(pixels[0]);
var h = hcl[0] + Math.PI * data.hue / 180;
if (h < 0) {
h += twoPi;
} else if (h > twoPi) {
h -= twoPi;
}
hcl[0] = h;
hcl[1] *= (data.chroma / 100);
hcl[2] *= (data.lightness / 100);
return hcl2rgb(hcl);
},
lib: {
/** lib
* Functions that will be made available to operations
* run in a worker.
* operation に利用可能となる関数がワーカで実行されます。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
rgb2hcl: rgb2hcl, hcl2rgb: hcl2rgb, rgb2xyz: rgb2xyz, lab2xyz: lab2xyz, xyz2lab: xyz2lab, xyz2rgb: xyz2rgb, Xn: Xn, Yn: Yn, Zn: Zn, t0: t0, t1: t1, t2: t2, t3: t3, twoPi: twoPi } });
raster.on('beforeoperations', function(event) {
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
var data = event.data;
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 オブジェクトは、数値を作業することを * 可能にするラッパー・オブジェクトです。 Number オブジェクト * は、Number（）コンストラクタを使用して作成されます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Number]） */
} });
var map = new ol.Map({
layers: [
new ol.layer.Image({
/** ol.layer.Image
* Server-rendered images that are available for arbitrary
* extents and resolutions.
* 任意の範囲と解像度で利用可能な server-rendered イメージ。
* （ol3 API）
*/
source: raster
})
],
target: 'map',
view: new ol.View({
center: [0, 2500000],
zoom: 2,
maxZoom: 18
})
});
var controlIds = ['hue', 'chroma', 'lightness'];
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 * 'change' event. * リビジョンカウンタを増加し、「change」イベントを送出します。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
}); output.innerText = control.value; controls[id] = control; });
0 件のコメント:
コメントを投稿