2 - ol3.2ex 62b - GetFeatureInfo example (image layer) 2

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

「262-ol3ex.js」

var wmsSource = new ol.source.ImageWMS({
/** ol.source.ImageWMS
 * Source for WMS servers providing single, untiled 
 * images.
 * 単一の、タイル状でない画像を提供する WMS サーバソース。
 * （ol3 API）
 */

 url: 'http://demo.boundlessgeo.com/geoserver/wms',
 params: {'LAYERS': 'ne:ne'},
 serverType: 'geoserver',

 crossOrigin: ''
 /** crossOrigin
  * The crossOrigin attribute for loaded images. Note 
  * that you must provide a crossOrigin value if you 
  * are using the WebGL renderer or if you want to 
  * access pixel data with the Canvas renderer. See 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image for more detail.
  * ロードされたイメージの crossOrigin属性。WebGLのレンダラー
  * を使用している場合、または、キャンバスレンダラでピクセルデー
  * タにアクセスする場合、crossOrigin 値を提供なければならない
  * ことに注意してください。詳細は 
  * https://developer.mozilla.org/en-US/docs/Web/HTML/
  * CORS_enabled_image を参照してください。（ol3 API）
  */
});

var wmsLayer = new ol.layer.Tile({
/** ol.layer.Image
 * Server-rendered images that are available for arbitrary 
 * extents and resolutions. 
 * 任意の範囲と解像度で利用可能な server-rendered イメージ。
 * （ol3 API）
 */
 source: wmsSource
});

var view = new ol.View({
 center: [0, 0],
 zoom: 1
});

var map = new ol.Map({

 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します

 layers: [wmsLayer],
 target: 'map',
 view: view
});

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

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

 var viewResolution = /** @type {number} */ (view.getResolution());
 /** @type 
  * 値のタイプ（型）の説明 - 式などで表示
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

 /** getResolution()
  * Return: The resolution of the view.
  * view（ビュー）の解像度を返します。（ol3 API）
  */

 var url = wmsSource.getGetFeatureInfoUrl(
 /** getGetFeatureInfoUrl()
  * Return the GetFeatureInfo URL for the passed 
  * coordinate, resolution, and projection. Return 
  * undefined if the GetFeatureInfo URL cannot be 
  * constructed.
  * 渡された座標、解像度、および投影のための GetFeatureInfo 
  * URL を返します。のGetFeatureInfo URL が構築できない
  * 場合は undefined を返します。。（ol3 API）
  */

  evt.coordinate, viewResolution, 'EPSG:3857',
  {'INFO_FORMAT': 'text/html'});

 if (url) {
  document.getElementById('info').innerHTML =
   '<iframe seamless src="' + url + '"></iframe>';
 }
});

map.on('pointermove', function(evt) {
 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.forEachLayerAtPixel(pixel, function(layer) {
 /** forEachLayerAtPixel(pixel, callback, opt_this, 
  * opt_layerFilter, opt_this2)
  * Detect layers that have a color value at a pixel 
  * on the viewport, and execute a callback with each 
  * matching layer. Layers included in the detection 
  * can be configured through opt_layerFilter. Feature
  *  overlays will always be included in the detection.
  * ビューポート上のピクセルの色値を持つレイヤを検出し、各
  * マッチングレイヤとのコールバックを実行します。検出に含
  * まれるレイヤがopt_layerFilterを介して設定することが
  * できます。フィーチャオーバーレイは常に検出に含まれます。
  * （ol3 API）
  */

  return true;
 });

 map.getTargetElement().style.cursor = hit ? 'pointer' : '';
 /** getTargetElement
  * Get the DOM element into which this map is 
  * rendered. In contrast to`getTarget` this 
  * method always return an `Element`, or `null` 
  * if themap has no target.
  * このマップがレンダリングされる DOM 要素を取得します。
  * マップがターゲットを持っていない場合は、`getTarget`
  * とは対照的に、このメソッドは常に` Element`、もしく
  * は `null`を返します。
  * （ol/ol/map.js）
  */

 /** 条件演算子 condition ? expr1 : expr2 
  * condition: true か false かを評価する条件文です。
  * expr1, expr2: 各々の値の場合に実行する式です。
  * condition が true の場合、演算子は expr1 の値を選択します。
  * そうでない場合は expr2 の値を選択します。
  * （MDN[https://developer.mozilla.org/ja/docs/JavaScript/
  * Reference/Operators/Conditional_Operator]）
  */

});

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.