2 - ol3.3ex 88b - Brightness/contrast example 2

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

「288-ol3ex.js」

function setResetBrightnessButtonHTML() {,

 resetBrightness.innerHTML = 'Brightness (' +
 /** element.innerHTML
  * innerHTML は、与えられた要素に含まれる全てのマークアップ
  * と内容を設定または取得します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/element.innerHTML]）
  */

  layer.getBrightness().toFixed(3) + ')';
  /** getBrightness()
   * Return: The brightness of the layer.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  /** Number.prototype.toFixed()
   * The toFixed() method formats a number using 
   * fixed-point notation.
   * toFixed() メソッドは、固定小数点表記を使用して数値を
   * フォーマットします。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Number/toFixed]）
   */

}

function setResetContrastButtonHTML() {
 resetContrast.innerHTML = 'Contrast (' +

  layer.getContrast().toFixed(3) + ')';
  /** getContrast()
   * Return: The contrast of the layer.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

}

if (!ol.has.WEBGL) {
/** ol.has.WEBGL{boolean}
 * True if browser supports WebGL.
 * ブラウザが WebGL をサポートしていたら true。（ol3 API）
 */

 var info = document.getElementById('no-webgl');
 /**
  * display error message
  */

 info.style.display = '';
} else {
 var layer = new ol.layer.Tile({

  source: new ol.source.MapQuest({layer: 'sat'})
  /** ol.source.MapQuest
   * Layer source for the MapQuest tile server.
   * MapQuest タイルサーバのレイヤソース。（ol3 API
   * 2 - ol3ex 23b - MapQuest example 2 参照）
   */

 });

 var map = new ol.Map({
  layers: [layer],
  renderer: 'webgl',
  target: 'map',
  view: new ol.View({
   center: [0, 0],
   zoom: 2
  })
 });

 var increaseBrightness = document.getElementById('increase-brightness');
 var resetBrightness = document.getElementById('reset-brightness');
 var decreaseBrightness = document.getElementById('decrease-brightness');

 setResetBrightnessButtonHTML();

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

  layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
  /** setBrightness
   * Adjust the layer brightness. A value of -1 will render 
   * the layer completely black. A value of 0 will leave 
   * the brightness unchanged. A value of 1 will render the 
   * layer completely white. Other values are linear 
   * multipliers on the effect (values are clamped between 
   *     -1 and 1).
   * The filter effects draft [1] says the brightness 
   * function is supposed to render 0 black, 1 unchanged, 
   * and all other values as a linear multiplier.
   * The current WebKit implementation clamps values between 
   * -1 (black) and 1 (white) [2]. There is a bug open to 
   * change the filter effect spec [3].
   * レイヤの明るさを調整します。 -1 の値は、レイヤが完全に黒に
   * レンダリングされます。 0 の値は変わらない明るさのままです。 
   * 1 の値は、レイヤが完全に白にレンダリングされます。他の値は
   * その効果でリニア乗数です（値は -1 と 1 の間に固定されます）。
   * フィルタ効果ドラフト[1]は、輝度関数は 0 はブラック、1 は変
   * わらず、他のすべての値をリニア乗数としてレンダリングするこ
   * とになっています。
   * 現在の WebKit の実装では、-1（黒）と1（白）の間の値を固定
   * させます[2]。フィルタ効果の仕様[3]を変更することが公開され
   * ているバグがあります。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

?

  /** Math.min() 
   * 引数として与えた複数の数の中で最小の数を返します。
   * （MDN [https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/min]）
   */

  /** getBrightness()
   * Return; The brightness of the layer.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  setResetBrightnessButtonHTML();
 }, false);
 resetBrightness.addEventListener('click', function() {
  layer.setBrightness(0);
  setResetBrightnessButtonHTML();
 }, false);
 decreaseBrightness.addEventListener('click', function() {

  layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
  /** Math.max() 
   * 引数として与えた複数の数の中で最大の数を返します。
   * （MDN [https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/max]）
   */

  setResetBrightnessButtonHTML();
 }, false);

 var increaseContrast = document.getElementById('increase-contrast');
 var resetContrast = document.getElementById('reset-contrast');
 var decreaseContrast = document.getElementById('decrease-contrast');

 setResetContrastButtonHTML();

 increaseContrast.addEventListener('click', function() {

  layer.setContrast(layer.getContrast() + 0.125);
  /** setContrast(contrast) 
   * Adjust layer contrast. A value of 0 will render 
   * the layer completely grey. A value of 1 will 
   * leave the contrast unchanged. Other values are 
   * linear multipliers of the effect (and values 
   * over 1 are permitted).
   * レイヤのコントラストを調整します。 0 の値は、レイヤが完全
   * に灰色にレンダリングされます。 1 の値はコントラストの変更
   * がないままです。他の値は線形乗算効果（1 以上の値が許可さ
   * れています）です。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  /** getContrast()
   * Return: The contrast of the layer.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  setResetContrastButtonHTML();
 }, false);
 resetContrast.addEventListener('click', function() {
  layer.setContrast(1);
  setResetContrastButtonHTML();
 }, false);
 decreaseContrast.addEventListener('click', function() {
  layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
  setResetContrastButtonHTML();
 }, false);
}