2 - ol3.5ex 117b - Permalink example 2

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

「2117-ol3ex.js」

// default zoom, center and rotation
var zoom = 2;
var center = [0, 0];
var rotation = 0;

if (window.location.hash !== '') {
/** window.location
 * 文書の URL についての情報を含み、また、URL を変更するためのメ
 * ソッドを提供をする、 Location オブジェクト を返します。別の 
 * URL を読み込ませるために、このプロパティに URL を代入すること
 * もできます。
 * hash [プロパティ] - #記号に続く URL の部分。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * Window/location]）
 */

 //try to restore center,zoom-level and rotation from the URL
 // URL から中心、ズームレベルと回転を復元します

 var hash = window.location.hash.replace('#map=', '');
 /** replace [メソッド]
  * 指定された URL に現在の文書を置き換えます。 assign() メソッ
  * ドとの違いは、replace() を用いた後、現在のページは、セッショ
  * ンの履歴には保持されないことです。つまり、ユーザは、置き換え
  * 前のページに戻るために、戻るボタンを使うことができません。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * Window/location]）
  */

 var parts = hash.split('/');
 /** str.split([separator[, limit]])
  *separator:区切ることに使用する文字列,limit:分割結果の数の制限
  * 文字列を複数の部分文字列に区切ることにより、String オブジェ
  * クトを文字列の配列に分割します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/String/split]）
  */

 if (parts.length === 4) {

  zoom = parseInt(parts[0], 10);
  /** parseInt(string, radix)
   * str: 文字列, radix: 基数（進法）
   * 文字列の引数をパースし、指定された基数の整数を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/parseInt]）
   */

  center = [

   parseFloat(parts[1]),
   /** parseFloat()
    *引数として与えられた文字列を解析し、浮動小数点数を返します。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/parseFloat]）
    */ 

   parseFloat(parts[2])
  ];
  rotation = parseFloat(parts[3]);
 }
}

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）
    */

  })
 ],

 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 // 折りたたみ
  })
 }),
 target: 'map',
 view: new ol.View({
  center: center,
  zoom: zoom,
  rotation: rotation
 })
});

var shouldUpdate = true;

var view = map.getView();
/** 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）
 */

var updatePermalink = function() {
 if (!shouldUpdate) {

  /** do not update the URL when the view was changed in the 
   * 'popstate' handler
   * ビューが「popstate」ハンドラで変更されたとき、URL を更新し
   * ません
   */

  shouldUpdate = true;
  return;
 }

 var center = view.getCenter();
 /** getCenter()
  * Return: The center of the view.（ol3 API）
  */

 var hash = '#map=' +

  view.getZoom() + '/' +
  /** getZoom()
   * Get the current zoom level. Return undefined if 
   * the current resolution is undefined or not a 
   * "constrained resolution".
   * 現在のズームレベルを取得します。現在の解像度が未定義か
   * 「制約解像度」の場合は undefined を返します。（ol3 API）
   */

  Math.round(center[0] * 100) / 100 + '/' +
  /** Math.round()
   * 引数として与えた数を四捨五入して、最も近似の整数を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/round]）
   */

  Math.round(center[1] * 100) / 100 + '/' +

  view.getRotation();
  /** getRotation()
   * Returns: The rotation of the view.（ol3 API）
   */

 var state = {
  zoom: view.getZoom(),
  center: view.getCenter(),
  rotation: view.getRotation()
 };

 window.history.pushState(state, 'map', hash);
 /** window.history
  * ブラウザの履歴を扱うためのインタフェースを提供する history 
  * オブジェクトへの参照を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
  * Window/history]）
  */

};

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

/** restore the view state when navigating through the 
 * history, see
 * 履歴を通してナビゲートするとき、ビューの状態を復元します。次を
 * 参照してください
 * https://developer.mozilla.org/en-US/docs/Web/API/
 * WindowEventHandlers/onpopstate

window.addEventListener('popstate', function(event) {
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *（MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 if (event.state === null) {
  return;
 }
 map.getView().setCenter(event.state.center);
 map.getView().setZoom(event.state.zoom);
 map.getView().setRotation(event.state.rotation);
 shouldUpdate = false;
});