2 - ol3.3ex 87b - Hue/saturation example 2

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

「287-ol3ex.js」

function setResetHueButtonHTML() {

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

 /** getHue()
  * Return: The hue 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 setResetSaturationButtonHTML() {
 resetSaturation.innerHTML = 'Saturation (' +

  layer.getSaturation().toFixed(2) + ')';
  /** getSaturation()
   * Return: The saturation 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.BingMaps({
  /** ol.source.BingMaps
   * Layer source for Bing Maps tile data.
   * Bing Maps タイルデータのレイヤソース。（ol3 API）
   */

   key: 'Ak-dzM4w...（省略）',
   imagerySet: 'Aerial'
  })
 })

 var map = new ol.Map({
  layers: [layer],
  renderer: 'webgl',
  target: 'map',
  view: new ol.View({
   center: ol.proj.transform([-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
   zoom: 15
  })
 });

 var increaseHue = document.getElementById('increase-hue');
 var resetHue = document.getElementById('reset-hue');
 var decreaseHue = document.getElementById('decrease-hue');

 setResetHueButtonHTML();

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

  layer.setHue(layer.getHue() + 0.25);
  /** setHue(hue) 
   * Apply a hue-rotation to the layer. A value of 0 
   * will leave the hue unchanged. Other values are 
   * radians around the color circle.
   * レイヤに色相回転を適用します。 0 の値は変わらない色合いを
   * 残します。他の値は色相環の周囲をラジアンで表します。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

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

  setResetHueButtonHTML();
 }, false);
 resetHue.addEventListener('click', function() {
  layer.setHue(0);
  setResetHueButtonHTML();
 }, false);
 decreaseHue.addEventListener('click', function() {
  layer.setHue(layer.getHue() - 0.25);
  setResetHueButtonHTML();
 }, false);

 var increaseSaturation = document.getElementById('increase-saturation');
 var resetSaturation = document.getElementById('reset-saturation');
 var decreaseSaturation = document.getElementById('decrease-saturation');

 setResetSaturationButtonHTML();

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

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

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

  setResetSaturationButtonHTML();
 }, false);
 resetSaturation.addEventListener('click', function() {
  layer.setSaturation(1);
   setResetSaturationButtonHTML();
 }, false);

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

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

  setResetSaturationButtonHTML();
 }, false);
}