「2105-ol3ex.js」
var map = new ol.Map({
layers: [
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 参照）
*/
}), new ol.layer.Group({
/** ol.layer.Group
* A ol.Collection of layers that are handled together.
* 同時に扱うレイヤの ol.Collection（ol3 API）
*/
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
/** ol.source.TileJSON
* Layer source for tile data in TileJSON format.
* TileJSON フォーマットのタイルデータのためのレイヤソース。
*（ol3 API）
*/
url: 'http://api.tiles.mapbox.com/v3/' + 'mapbox.20110804-hoa-foodinsecurity-3month.jsonp',
crossOrigin: 'anonymous' /** CORS(Cross-Origin Resource Sharing) header を設定 * 参考：HTTP access control (CORS) * [https://developer.mozilla.org/ja/docs/ * HTTP_access_control] */
})
}),
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/' +
'mapbox.world-borders-light.jsonp',
crossOrigin: 'anonymous'
})
})
]
})
],
renderer: exampleNS.getRendererFromQueryString(), // 'example-behavior.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
center: ol.proj.transform([37.40570, 8.81566], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
function bindInputs(layerid, layer) {
new ol.dom.Input($(layerid + ' .visible')[0]) /** ol.dom.Input * Helper class for binding HTML input to an ol.Object. * ol.Object に HTML input要素を接続するためのヘルパークラス。 * （ol3 API） */
.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 のチェックを外すと表示]）
*/
$.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'], /** .each() * Iterate over a jQuery object, executing a function for * each matched element. * マッチした各要素に対して関数を実行するため、jQueryオブジェク * トを反復処理します。（jQuery[https://api.jquery.com/each/]） */
function(i, v) {
new ol.dom.Input($(layerid + ' .' + v)[0])
.bindTo('value', layer, v)
.transform(parseFloat, String);
}
);
}
map.getLayers().forEach(function(layer, i) {
/** getLayers()
* Get the collection of layers associated with this
* map.
* このマップと関連するレイヤのコレクションを取得します。
* （ol3 API）
*/
bindInputs('#layer' + i, layer);
if (layer instanceof ol.layer.Group) {
/** instanceof
* instanceof 演算子は、オブジェクトが自身のプロトタイプに
* コンストラクタの prototype プロパティを持っているかを確
* 認します。
* （MDN[https://developer.mozilla.org/ja/docs/
* JavaScript/Reference/Operators/instanceof]）
*/
layer.getLayers().forEach(function(sublayer, j) {
/** forEach(f, opt_this)
* Iterate over each element, calling the provided
* callback.
* 提供されたコールバックを呼び出すため、各要素を反復処理しま
* す。（ol3 API）
*/
bindInputs('#layer' + i + j, sublayer);
});
}
});
$('#layertree li > span').click(function() {
/** .click(handler)
* Bind an event handler to the "click" JavaScript event,
* or trigger that event on an element.
* "click" JavaScript イベントにイベントハンドラをバインド、
* または、要素上でそのイベントをトリガします。
* （jQuery[https://api.jquery.com/click/]）
*/
$(this).siblings('fieldset').toggle();
/** .siblings([selector])
* Get the siblings of each element in the set of matched
* elements, optionally filtered by a selector.
* 必要に応じてセレクタによってフィルタリングした、マッチした
* 各要素のセットの兄弟要素を取得します。
* （jQuery[https://api.jquery.com/siblings/]）
*/
/** .toggle( [duration ] [, complete ] ) * Display or hide the matched elements. * マッチしたエレメントを表示または隠します。 * （jQuery[https://api.jquery.com/toggle/]） */
}).siblings('fieldset').hide();
/** .hide()
* Hide the matched elements.
* マッチしたエレメントを隠します。
* （jQuery[https://api.jquery.com/hide/]）
*/
0 件のコメント:
コメントを投稿