2 - ol3ex 40b - Overlay example 2

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

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