2 - ol3ex 37b - Icon example 2

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

「237-ol3ex.js」の内容

var iconFeature = new ol.Feature({
/** ol.Feature 
 * A vector object for geographic features with a geometry 
 * and other attribute properties, similar to the features 
 * vector file formats like GeoJSON.
 * GeoJSONのようなフィーチャベクタファイルフォーマットと同様の、
 * ジオメトリおよびその他の属性プロパティを持つ地理的フィーチャの
 * ベクタオブジェクト。（ol3 API）
 */

 geometry: new ol.geom.Point([0, 0]),
 /** ol.geom.Point
  * Point geometry.（ol3 API）
  */

 name: 'Null Island',
 population: 4000,
 rainfall: 500
});

var iconStyle = new ol.style.Style({
/** ol.style.Style 
 * Base class for vector feature rendering styles.
 * ベクタフィーチャがスタイルを描画するための基本クラス。
 * （ol3 API）
 */

 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 /** ol.style.Icon 
  * Set icon style for vector features.
  * ベクタフィーチャのアイコンスタイルを設定します。（ol3 API）
  */

 /** @type 
  * 値のタイプ（型）の説明 - 式などで表示
  * olx.style.IconOptions の型を使用。
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

  anchor: [0.5, 46],
  anchorXUnits: 'fraction',
  anchorYUnits: 'pixels',
  opacity: 0.75,
  // src: 'data/icon.png'
  src: 'v3.0.0/examples/data/icon.png'
 }))
});

iconFeature.setStyle(iconStyle);
/** setStyle
 * Set the style for this feature.
 * このフィーチャのスタイルを設定します。（ol3 API）
 */

var vectorSource = new ol.source.Vector({
/** ol.source.Vector 
 * Provides a source of features for vector layers.
 * ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
 */
 features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されるベクタデータ。（ol3 API）
 */
 source: vectorSource
});

var rasterLayer = 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.TileJSON({
 /** ol.source.TileJSON 
  * Layer source for tile data in TileJSON format.
  * TileJSON フォーマットのタイルデータのためのレイヤソース。
  *（ol3 API）
  */

  url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
 })
});

var map = new ol.Map({
 layers: [rasterLayer, vectorLayer],
 target: document.getElementById('map'),
 view: new ol.View({
  center: [0, 0],
  zoom: 3
 })
});

var element = document.getElementById('popup');

var popup = 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）
 */

 element: element,
 positioning: 'bottom-center',
 stopEvent: false
});

map.addOverlay(popup);
/** addOverlay()
 * Add the given overlay to the map.
 * 与えられたオーバーレイをマップに追加します。（ol3 API）
 */

// display popup on click
map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */
 var feature = map.forEachFeatureAtPixel(evt.pixel,
 /** forEachFeatureAtPixel
  * Detect features that intersect a pixel on the viewport, 
  * and execute a callback with each intersecting feature. 
  * Layers included in the detection can be configured 
  * through opt_layerFilter. Feature overlays will always 
  * be included in the detection.
  * ビューポート上のピクセルと交差するフィーチャを検出し、
  * 各交差するフィーチャとコールバックを実行します。
  * 検出に含まれるレイヤが opt_layerFilter を通じて
  * 設定することができます。フィーチャーオーバーレイは
  * 常に検出に含まれます。（ol3 API）
  */

 function(feature, layer) {
  return feature;
 });
 if (feature) {

  var geometry = feature.getGeometry();
  /** getGeometry()
   *  Returns the Geometry associated with this feature 
   * using the current geometry name property. By default, 
   * this is geometry but it may be changed by calling 
   * setGeometryName.
   * 現在のジオメトリネームプロパティを使用して、この
   * フィーチャに関連したジオメトリを返します。デフォルト
   * では、ジオメトリですが、setGeometryName を呼び出す
   * ことによって変更することができます。（ol3 API）
   */

  var coord = geometry.getCoordinates();
  /** getCoordinates()
   * Returns: Coordinates.（ol3 API）
   */

  popup.setPosition(coord);
  /** setPosition()
   * Set the position for this overlay.
   * このオーバーレイの位置を設定します。（ol3 API）
   */

  $(element).popover({
  /** 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]）
   */ 

   'placement': 'top',
   'html': true,

   'content': feature.get('name')
   /** get(key)
    * Gets a value.
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

  });
  $(element).popover('show');
 } else {
  $(element).popover('destroy');
 }
});

// change mouse cursor when over marker
$(map.getViewport()).on('mousemove', function(e) {
/** getViewport()
 * Return: Viewport （ol3 API）
 */
/** jQuery on イベント */

 var pixel = map.getEventPixel(e.originalEvent);
 /** getEventPixel
  * Returns the map pixel position for a browser event.
  * ブラウザイベントに対して、マップのピクセル位置を返します。
  * （ol3 API）
  */

 var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
  return true;
 });
 if (hit) {

  map.getTarget().style.cursor = 'pointer';
  /** getTarget()
   * Get the target in which this map is rendered. 
   * Note that this returns what is entered as an option or  
   * in setTarget: if that was an element, it returns an 
   * element; if a string, it returns that.
   * レンダリングされたこのマップのターゲットを取得します。
   * これはオプションとして、または setTarget に入力されているも
   * のを返すことに注意してください：それが要素ならば、要素を返し
   * ます。文字列ならば、それを返します。（ol3 API）
   */

 } else {
  map.getTarget().style.cursor = '';
 }
});