「286-ol3ex.js」
function checkWebGL(evt) {
document.getElementById('no-webgl').style.display =
ol.has.WEBGL ? 'none' : '';
/** ol.has.WEBGL{boolean}
* True if browser supports WebGL.
* ブラウザが WebGL をサポートしていたら true。（ol3 API）
*/
/** 条件演算子 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]） */
document.getElementById('has-webgl').style.display =
ol.has.WEBGL && !evt.glContext ? '' : 'none'; /** glContext() * WebGL context. Only available when a WebGL renderer * is used, null otherwise. * WebGLのコンテキスト。WebGL レンダラを使用する場合にだけ * 利用でき、そうでない場合は null。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
document.getElementById('webgl').style.display =
evt.glContext ? '' : 'none';
}
var layer = new ol.layer.Tile({
source: new ol.source.OSM() /** ol.source.OSM * Layer source for the OpenStreetMap tile server. * OpenStreetMap タイルサーバのレイヤソース。（ol3 API） */
});
layer.once('precompose', checkWebGL);
/** once()
* Listen once for a certain type of event.
* あるタイプのイヴェントを１回リッスンします。
* Return: Unigue key for the listener.（ol3 API）
*/
/** precompose イベント * レイヤを描画する前に発生するイベント。 * （「Layer spy example」参照） */
var view = new ol.View({
center: [0, 0],
zoom: 2
});
var map = new ol.Map({
layers: [layer],
renderer: exampleNS.getRendererFromQueryString(), /** 'example-behavior.js' により URL にある renderer を返します */
target: 'map',
controls: ol.control.defaults({
/** controls
* Controls initially added to the map.
* If not specified, ol.control.defaults() is used.
* 初期設定で、マップに追加されたコントロール。
* 明示されていなければ、ol.control.defaults() が使用されます。
* （ol3 API）
*/
/** ol.control.defaults() * デフォルトでは、マップに含まコントロールのセット。 * 特に設定しない限り、これは、以下の各コントロールの * インスタンスを含むコレクションを返します。(ol3 API） * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution */
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ }) }), view: view });
var visible = new ol.dom.Input(document.getElementById('visible'));
/** ol.dom.Input
* Helper class for binding HTML input to an ol.Object.
* ol.Object に HTML input要素を接続するためのヘルパークラス。
* （ol3 API）
*/
visible.bindTo('checked', layer, 'visible');
/** bindTo
* The bindTo method allows you to set up a two-way
* binding between a `source` and `target` object.
* The method returns an object with a `transform`
* method that you can use to provide `from` and
* `to` functions to transform values on the way
* from the source to the target and on the way back.
* bindTo メソッドは、`source` と ` target` オブジェク
* ト間の結合を双方向に設定することができます。メソッドは、
* ソースからターゲットに、および、その逆方向に値を変換
* する、 `from` と ` to` ファンクションを提供するため
* に使用することがでる `transform` メソッドをともなっ
* た、オブジェクトを返します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var opacity = new ol.dom.Input(document.getElementById('opacity'));
opacity.bindTo('value', layer, 'opacity')
.transform(parseFloat, String); /** parseFloat() * 引数として与えられた文字列を解析し、浮動小数点数を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/parseFloat]） */
var hue = new ol.dom.Input(document.getElementById('hue'));
hue.bindTo('value', layer, 'hue')
.transform(parseFloat, String);
var saturation = new ol.dom.Input(document.getElementById('saturation'));
saturation.bindTo('value', layer, 'saturation')
.transform(parseFloat, String);
var contrast = new ol.dom.Input(document.getElementById('contrast'));
contrast.bindTo('value', layer, 'contrast')
.transform(parseFloat, String);
var brightness = new ol.dom.Input(document.getElementById('brightness'));
brightness.bindTo('value', layer, 'brightness')
.transform(parseFloat, String);
var rotation = new ol.dom.Input(document.getElementById('rotation'));
rotation.bindTo('value', view, 'rotation').transform(parseFloat, String);
var resolution = new ol.dom.Input(document.getElementById('resolution'));
resolution.bindTo('value', view, 'resolution').transform(parseFloat, String);
0 件のコメント:
コメントを投稿