「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); }
