2 - ol4.1ex 169b - View Min-Zoom 2

「min-zoom.js（2169-ol4ex.js）」は、マップを表示するための JavaScript ファイルです。

「2169-ol4ex.js」

var viewport = document.getElementById('map');

function getMinZoom() {
 var width = viewport.clientWidth;

 return Math.ceil(Math.LOG2E * Math.log(width / 256));
 /** Math.ceil()
  * The Math.ceil() function returns the smallest integer 
  * greater than or equal to a given number.
  * 引数として与えた数以上の最小の整数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/ceil]）
  */

 /** Math.LOG2E()
  * The Math.LOG2E property represents the base 2 logarithm  
  * of e, approximately 1.442:
  * 2 を底とした E の対数。約 1.442 です。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/LOG2E]）
  */

 /** Math.log()
  * The Math.log() function returns the natural logarithm  
  * (base e) of a number.
  * Math.log() 関数は、引数として与えた数の自然対数 (底は e) 
  * を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/log]）
  */

}

var initialZoom = getMinZoom();

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

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. 
   * プリレンダリング（事前描画）を提供するレイヤソースのため
   * の、特定の解像度でのズームレベルによって編成されているグ
   * リッドのタイルイメージ。（ol4 API）
   */

   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol4 API）
    */

  })
 ],
 target: 'map',
 view: view
});

window.addEventListener('resize', function() {
/** EventTarget.addEventListener
 * The EventTarget.addEventListener() method registers 
 * the specified listener on the EventTarget it's called 
 * on. The event target may be an Element in a document, 
 * the Document itself, a Window, or any other object 
 * that supports events (such as XMLHttpRequest).
 * EventTarget.addEventListener() メソッドは、それが呼び
 * 出される EventTarget に指定されたリスナを登録します。イベ
 * ントターゲットは、ドキュメントの Element、Document 自身、
 * Window、または（XMLHttpRequest などの）イベントをサポート
 * している他のオブジェクトです。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/EventTarget/addEventListener]）
 */

 var minZoom = getMinZoom();

 if (minZoom !== view.getMinZoom()) {
 /** getMinZoom()
  * Get the minimum zoom level for the view.
   * view の最小ズームレベルを取得します。（ol4 API）
  */

  view.setMinZoom(minZoom);
  /** setMinZoom(zoom)
   * Set a new minimum zoom level for the view.
   * view の最小ズームレベルを設定します。（ol4 API）
   */

 }
});