2 - ol3.2ex 65b -Move end example 2

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

「265-ol3ex.js」

var map = new ol.Map({
 layers: [

  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.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  })
 ],

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

 target: 'map',

 controls: ol.control.defaults({
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * （ol3 API）
  */

 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API）
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */

  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ（型）の説明 - 式などで表示
   * （@use JSDoc[http://usejsdoc.org/]より）
   */

   collapsible: false // 折りたたみ
  })
 }),
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

function display(id, value) {

 document.getElementById(id).value = value.toFixed(2);
 /** Number.prototype.toFixed()
  * The toFixed() method formats a number using 
  * fixed-point notation.
  * toFixed() メソッドは、固定小数点表記を使用して数値を
  * フォーマットします。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Number/toFixed]）
  */

}

function wrapLon(value) {

 var worlds = Math.floor((value + 180) / 360);
 /** Math.floor()
  * The Math.floor() function returns the largest 
  * integer less than or equal to a given number.
  * Math.floor() 関数は、指定された数以下の最大の整数、
  * または、等しい数を返します。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/floor]）
  */

 return value - (worlds * 360);
}

function onMoveEnd(evt) {
 var map = evt.map;

 var extent = map.getView().calculateExtent(map.getSize());
 /** getView()
  * Get the view associated with this map. A view 
  * manages properties such as center and resolution.
  * このマップと関連するビューを取得します。ビューは、
  * 中心や解像度のような属性を管理します。
  * Return: The view that controls this map.（ol3 API）
  */

 /** calculateExtent
  * Calculate the extent for the current view state and 
  * the passed `size`. `size` is the size in pixels of 
  * the box into which the calculated extent should fit. 
  * In most cases you want to get the extent of the 
  * entire map, that is `map.getSize()`. 
  * 現在のビューステートと渡された`size`の範囲を計算します。 
  * `size`は、計算された範囲に収まるボックスのピクセル単位
  * のサイズです。ほとんどの場合、マップ全体の範囲を取得しま
  * すが、それは`map.getSize（）`です。（ol/ol/view.js）
  */

 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of the map in the DOM.
  * マップのサイズを取得。（ol3 API）
  */

 var bottomLeft = ol.proj.transform(ol.extent.getBottomLeft(extent),
 /** 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）
  */

 /** ol.extent.getBottomLeft
  * Return: Bottom Left coordinate.（ol3 API）
  */

  'EPSG:3857', 'EPSG:4326');

 var topRight = ol.proj.transform(ol.extent.getTopRight(extent),
 /** ol.extent.getTopRight
  * Return: Top Right coordinate.（ol3 API）
  */

  'EPSG:3857', 'EPSG:4326');
 display('left', wrapLon(bottomLeft[0]));
 display('bottom', bottomLeft[1]);
 display('right', wrapLon(topRight[0]));
 display('top', topRight[1]);
}

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