2 - ol3.3ex 89b - Icon sprite with WebGL example 2

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

「289-ol3ex.js」

var iconInfo = [{
  offset: [0, 0],
  opacity: 1.0,
  rotateWithView: true,
  rotation: 0.0,
  scale: 1.0,
  size: [55, 55]
}, {
  offset: [110, 86],
  opacity: 0.75,
  rotateWithView: false,
  rotation: Math.PI / 2.0,
  /** Math.PI()
   * 円周率。約 3.14159 です。
   * （MDN[https://developer.mozilla.org/ja/docs/Web
   * /JavaScript/Reference/Global_Objects/Math/PI]）
   */
  scale: 1.25,
  size: [55, 55]
}, {
  offset: [55, 0],
  opacity: 0.5,
  rotateWithView: true,
  rotation: Math.PI / 3.0,
  scale: 1.5,
  size: [55, 86]
}, {
  offset: [212, 0],
  opacity: 1.0,
  rotateWithView: true,
  rotation: 0.0,
  scale: 1.0,
  size: [44, 44]
}];

var i;

var iconCount = iconInfo.length;

var icons = new Array(iconCount);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複数
 * のデータの集合であり、JavaScript のグローバルオブジェクトであ 
 * る Array は、高位の、（C言語等で云うところの）「リスト」の様
 * な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数（arrayLength）に 0 
 * から 4,294,967,295( 232-1 ) までの整数値を指定する場合は、そ
 * の値を要素数とする配列が作成されます。その際に範囲外の値を指
 * 定した場合には、例外: RangeError がスローされます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array]）
 */

for (i = 0; i < iconCount; ++i) {
 var info = iconInfo[i];

 icons[i] = new ol.style.Icon({
 /** ol.style.Icon 
  * Set icon style for vector features.
  * ベクタフィーチャのアイコンスタイルを設定します。
  * （ol3 API）
  */

  offset: info.offset,
  opacity: info.opacity,
  rotateWithView: info.rotateWithView,
  rotation: info.rotation,
  scale: info.scale,
  size: info.size,
  // src: 'data/Butterfly.png'
  src: 'v3.3.0/examples/data/Butterfly.png'
 });
}

var featureCount = 50000;
var features = new Array(featureCount);
var feature, geometry;
var e = 25000000;

for (i = 0; i < featureCount; ++i) {

 geometry = new ol.geom.Point(
 /** ol.geom.Point
  * Point geometry.（ol3 API）
  */

  [2 * e * Math.random() - e, 2 * e * Math.random() - e]);
  /** Math.random()
   * The Math.random() function returns a floating-point, 
   * pseudo-random number in the range [0, 1) that is, 
   * from 0 (inclusive) up to but not including 1 
   * (exclusive), which you can then scale to your 
   * desired range. The implementation selects the 
   * initial seed to the random number generation 
   * algorithm; it cannot be chosen or reset by the 
   * user.
   * Math.random() 関数は浮動小数点を返し、0 と 1 の範囲の
   * 擬似乱数、すなわち 0 以上 1 未満、で、任意の範囲に合わせ
   * ることができます。インプリメンテーションは、乱数発生アル
   * ゴリズムのためにイニシャルシードを選択しますが、ユーザが
   * 選んだりリセットできません。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/random]）
   */

 feature = new ol.Feature(geometry);
 /** ol.Feature
  * A vector object for geographic features with a geometry 
  * and other attribute properties, similar to the features 
  * in vector file formats like GeoJSON.
  * GeoJSONのようなベクトルファイル形式のフィーチャに類似した、
  * ジオメトリとその他の属性プロパティを持つ地物フィーチャのため
  * のベクトルオブジェクト。（ol3 API）
  */

 feature.setStyle(
 /** setStyle
  * Set the style for the feature. This can be a 
  * single style object, an array of styles, or a 
  * function that takes a resolution and returns an 
  * array of styles. If it is null the feature has 
  * no style (a null style).
  * フィーチャのスタイルを設定します。これは、単一のスタイル
  * オブジェクト、スタイルの配列、または、解像度を取りスタイ
  * ルの配列を返す関数とすることができます。それが null の
  * 場合フィーチャは、スタイル（ヌルスタイル）を持っていませ
  * ん。（ol3 API）
  */

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

   image: icons[i % (iconCount - 1)]
   /** %（モジュロ）
    * 二項演算子です。2 つのオペランドで除算したときの、整数の余
    * りを返します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Guide/Expressions_and_Operators]）
    */

  })
 );
 features[i] = feature;
}

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

 features: features
});

var vector = new ol.layer.Vector({
 source: vectorSource
});

// Use the "webgl" renderer by default.

var renderer = exampleNS.getRendererFromQueryString();
 /** 'example-behavior.js' により URL にある renderer を返します */

if (!renderer) {
 renderer = 'webgl';
}

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

var overlayFeatures = [];

for (i = 0; i < featureCount; i += 30) {

 var clone = features[i].clone();
 /** clone()
  * Clone this feature. If the original feature has 
  * a geometry it is also cloned. The feature id is 
  * not set in the clone.
  * このフィーチャを複製します。元のフィーチャは、ジオメトリ
  * を有する場合にも複製します。フィーチャ ID は、クローンに
  * 設定されていません。（ol3 API）
  */

 clone.setStyle(null);

 overlayFeatures.push(clone);
 /** push(elem)
  * Insert the provided element at the end of the 
  * collection.
  * コレクションの最後に供給されたエレメントに挿入します。
  * Name: elem, Type: T, Description: Element
  * （ol3 API）
  */

}

var featureOverlay = new ol.FeatureOverlay({
/** ol.FeatureOverlay
 * A mechanism for changing the style of a small number of 
 * features on a temporary basis, for example highlighting. 
 * This is necessary with the Canvas renderer, where, unlike
 * in SVG, features cannot be individually referenced.
 * ハイライトのように、一時的に少数のフィーチャがスタイルの変更す
 * るためのメカニズム。これは Canvas レンダラが必要で、SVGとは異
 * なり、フィーチャを個別に参照することはできません。（ol3 API）
 */

 map: map,
 style: new ol.style.Style({
  image: icons[iconCount - 1]
 }),
 features: overlayFeatures
});

map.on('click', function(evt) {
 var info = document.getElementById('info');

 info.innerHTML =
 /** element.innerHTML
  * innerHTML は、与えられた要素に含まれる全てのマークアップ
  * と内容を設定または取得します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/element.innerHTML]）
  */

  'Hold on a second, while I catch those butterflies for you ...';

  window.setTimeout(function() {
  /** setTimeout(func, dylay)
   * 指定された遅延の後に、コードの断片または関数を実行します。
   * func : delay ミリ秒後に実行したい関数。
   * delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * API/Window/setTimeout]）
   */

   var features = [];

   map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
   /** 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）
    */

    features.push(features);
    return false;
   });

   if (features.length === 1) {
    info.innerHTML = 'Got one butterfly';
   } else if (features.length > 1) {
    info.innerHTML = 'Got ' + features.length + ' butterflies';
   } else {
    info.innerHTML = 'Couldn\'t catch a single butterfly';
   }
  }, 1);
});

map.on('pointermove', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */

/** pointermove
 * Triggered when a pointer is moved. Note that on 
 * touch devices this is triggered when the map is 
 * panned, so is not the same as mousemove.
 * ポインタが移動されたときにトリガされます。タッチデバイス
 * で、マップがパンされるときにこれはトリガーされ、 mousemove 
 * と同じではないことに注意してください。
 * （ol3 API）
 */

 if (evt.dragging) {
  return;
 }

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

 var hit = map.hasFeatureAtPixel(pixel);
 /** hasFeatureAtPixel()
  * Detect if features intersect a pixel on the 
  * viewport. Layers included in the detection can be 
  * configured through opt_layerFilter. Feature over
  * lays will always be included in the detection.
  * フィーチャがビューポート上でピクセルと交差するかどうかを検出
  * します。検出に含まれたレイヤは、opt_layerFilter を通じて
  * 設定することができます。フィーチャオーバーレイは、常に検出に
  * 含まれます。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 map.getTarget().style.cursor = hit ? '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）
  */

 /** 条件演算子 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]）
  */

});

 

originalEvent

「ol.MapBrowserEvent」
（Events emitted as map browser events are instances of this type. See ol.Map for which events trigger a map browser event.
マップブラウザイベントとして発するイベントは、このタイプのインスタンスです。イベントがマップブラウザイベントをトリガする ol.Map を参照してください。）
のメンバ。

ol/ol/mapbrowserevent.js 32行目
 * @param {goog.events.BrowserEvent} browserEvent Browser event.
ol/ol/mapbrowserevent.js 52行目
 this.originalEvent = browserEvent.getBrowserEvent();

goog.events.BrowserEvent
「events.BrowserEvent - Extends goog.events.Event」
（http://docs.closure-library.googlecode.com/git/class_goog_events_BrowserEvent.html）
Accepts a browser event object and creates a patched, cross browser event object. The content of this object will not be initialized if no event object is provided. If this is the case, init() needs to be invoked separately.
events.BrowserEvent。goog.events.Eventを拡張します。
ブラウザイベントオブジェクトを受け入れ、パッチを適用した、クロスブラウザイベントオブジェクトを作成します。イベントオブジェクトが提供されない場合は、このオブジェクトの内容は初期化されません。この場合は、init()は別々に呼び出す必要があります。

「Instance Methods」
getBrowserEvent() ⇒ Event
No description.
Returns: Event  The underlying browser event object.