「240-ol3ex.js」の内容
var layer = new ol.layer.Tile({
/** ol.layer.Tile
* For layer sources that provide pre-rendered, tiled
* images in grids that are organized by zoom levels for
* specific resolutions.
* プリレンダリング（事前描画）を提供するレイヤソースのための、
* 特定の解像度でのズームレベルによって編成されているグリッドの
* タイルイメージ。（ol3 API）
*/
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: exampleNS.getRendererFromQueryString(), //'example-behavior.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var pos = ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'); /** ol.proj.transform(coordinate, source, destination) * Transforms a coordinate from source projection to * destination projection. This returns a new coordinate * (and does not modify the original). * ソース投影から変換先投影に座標変換します。これは、新しい座標 * を返します（オリジナルを変更しません）。（ol3 API） */
// Vienna marker
var marker = new ol.Overlay({
/** ol.Overlay
* Like ol.control.Control, Overlays are visible widgets.
* Unlike Controls, they are not in a fixed position on
* the screen, but are tied to a geographical coordinate,
* so panning the map will move an Overlay but not a Control.
* ol.control.Controlと同じように、オーバーレイは、目に見える
* ウィジェットです。コントロールとは異なり、それらは画面上の
* 固定された位置にありませんが、地理座標に関連付けられている
* ので、オーバーレイを移動しますが、コントロールできない
* マップをパンします。（ol3 API）
*/
position: pos,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false
});
map.addOverlay(marker); /** addOverlay() * Add the given overlay to the map. * 与えられたオーバーレイをマップに追加します。（ol3 API） */
// Vienna label
var vienna = new ol.Overlay({
position: pos,
element: document.getElementById('vienna')
});
map.addOverlay(vienna);
// Popup showing the position the user clicked
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
map.addOverlay(popup);
map.on('click', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
var element = popup.getElement(); /** getElement() * Get the DOM element of this overlay. * このオーバーレイの DOM エレメントを取得します。 * （ol3 API） */
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( /** ol.coordinate.toStringHDMS() * Returns: Hemisphere, degrees, minutes and seconds. * （ol3 API） */ coordinate, 'EPSG:3857', 'EPSG:4326'));
$(element).popover('destroy');
/** Popovers popover.js
* Add small overlays of content, like those on the iPad,
* to any element for housing secondary information.
* Popovers whose both title and content are zero-length
* are never displayed.
* コンテンツの小さなオーバーレイを、iPad上のもののように、
* ハウジング二次情報のための要素に追加します。
* タイトルと内容の両方が長さゼロ（の文字列）である Popovers
* は、表示されません。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
popup.setPosition(coordinate); /** etPosition(position)) * Set the position for this overlay. * このオーバーレイの位置を設定します。（ol3 API） */
/** the keys are quoted to prevent renaming in * ADVANCED_OPTIMIZATIONS mode. * キーはADVANCED_OPTIMIZATIONSモードで名前変更を防ぐために、 * ここで提示します。 */
$(element).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
});
$(element).popover('show');
});
