2 - ol3.2ex 63b - Advanced View Positioning example 2

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

「263-ol3ex.js」

var source = new ol.source.GeoJSON({
/** ol.source.GeoJSON 
 * Static vector source in GeoJSON format
 * GeoJSON フォーマットの静的ベクタソース。（ol3 API）
 */

 projection: 'EPSG:3857',
// url: 'data/geojson/switzerland.geojson'
 url: 'v3.2.1/examples/data/geojson/switzerland.geojson'
 // 修正
});

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

 fill: new ol.style.Fill({
 /** ol.style.Fill 
  * Set fill style for vector features.
  * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
  */

  color: 'rgba(255, 255, 255, 0.6)'
 }),

 stroke: new ol.style.Stroke({
 /** ol.style.Stroke 
  * Set stroke style for vector features. 
  * Note that the defaults given are the Canvas defaults, 
  * which will be used if option is not defined. 
  * The get functions return whatever was entered 
  * in the options;  they will not return the default.
  * ベクタフィーチャのためのストロークスタイルの設定。
  * デフォルトは、オプションが定義されていない場合に使用される
  * Canvas のデフォルトを与えられることに注意してください。 
  * GET関数は、オプションで入力されたものはすべて返します。
  * それらはデフォルトを返しません。（ol3 API）
  */

  color: '#319FD3',
  width: 1
 }),

 image: new ol.style.Circle({
 /** ol.style.Circle
  * Set circle style for vector features.
  * ベクタフィーチャの円のスタイルを設定。（ol3 API）
  */

  radius: 5,
  fill: new ol.style.Fill({
   color: 'rgba(255, 255, 255, 0.6)'
  }),
  stroke: new ol.style.Stroke({
   color: '#319FD3',
   width: 1
  })
 })
});

var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されたベクタデータ。（ol3 API）
 */

 source: source,
 style: style
});

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

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

  }),
  vectorLayer
 ],
 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: view
});

var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');

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

 var feature = source.getFeatures()[0];
 /** getFeatures()
  * Get all features on the source.
  * ソースのすべてのフィーチャを取得します。
  * Return: Features（ol3 API）
  */

 var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
 /** getGeometry()
  * Returns the Geometry associated with this feature 
  * using the current geometry name property. By default, 
  * this is geometry but it may be changed by calling 
  * setGeometryName.
  * 現在のジオメトリネームプロパティを使用して、このフィーチャに
  * 関連したジオメトリを返します。デフォルトでは、ジオメトリです
  * が、setGeometryName を呼び出すことによって変更することがで
  * きます。（ol3 API）
  */

 var size = /** @type {ol.Size} */ (map.getSize());
 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of the map in the DOM.
  * マップのサイズを取得。（ol3 API）
  */

 view.fitGeometry(
 /**fitGeometry()
  * Fit the given geometry based on the given map 
  * size and border. Take care on the map angle.
  * 与えられたマップサイズと境界線に基づいて、与えられた
  * ジオメトリーを合わせます。地図角度に注意してください。
  * （ol/ol/view.js）
  */

  polygon,
  size,
  {
   padding: [170, 50, 30, 150],
   constrainResolution: false
  }
 );
}, false);

var zoomtoswitzerlandconstrained =
 document.getElementById('zoomtoswitzerlandconstrained');
zoomtoswitzerlandconstrained.addEventListener('click', function() {
 var feature = source.getFeatures()[0];
 var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
 var size = /** @type {ol.Size} */ (map.getSize());
 view.fitGeometry(
  polygon,
  size,
  {
   padding: [170, 50, 30, 150]
  }
 );
}, false);

var zoomtoswitzerlandnearest =
 document.getElementById('zoomtoswitzerlandnearest');
zoomtoswitzerlandnearest.addEventListener('click', function() {
 var feature = source.getFeatures()[0];
 var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
 var size = /** @type {ol.Size} */ (map.getSize());
 view.fitGeometry(
  polygon,
  size,
  {
   adding: [170, 50, 30, 150],
   nearest: true
  }
 );
}, false);

var zoomtolausanne = document.getElementById('zoomtolausanne');
zoomtolausanne.addEventListener('click', function() {
 var feature = source.getFeatures()[1];
 var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
 var size = /** @type {ol.Size} */ (map.getSize());
 view.fitGeometry(
  point,
  size,
  {
   padding: [170, 50, 30, 150],
   minResolution: 50
  }
 );
}, false);

var centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener('click', function() {
 var feature = source.getFeatures()[1];
 var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
 var size = /** @type {ol.Size} */ (map.getSize());
 view.centerOn(

  point.getCoordinates(),
 /** getCoordinates()
  * Returns: Coordinates.（ol3 API）
  */

  size,
  [570, 500]
 );
}, false);