2 - ol3.20ex 163b - Pinch Zoom 2

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

「2163-ol3ex.js」

var map = new ol.Map({

 interactions: ol.interaction.defaults({pinchZoom: false}).extend([
 /** ol.interaction.defaults
  * Set of interactions included in maps by default. 
  * Specific interactions can be excluded by setting 
  * the appropriate option to false in the constructor 
  * options, but the order of the interactions is fixed. 
  * If you want to specify a different order for 
  * interactions, you will need to create your own 
  * ol.interaction.Interaction instances and insert 
  * them into a ol.Collection in the order you want 
  * before creating your ol.Map instance.
  * デフォルトでマップに含まれるインターラクションのセット。
  * 具体的なインターラクションは、コンストラクタのオプションで適
  * 切なオプションを false に設定することで除外することができま
  * すが、インターラクションの順番は固定されています。インターラ
  * クションに対して別の順番を指定したい場合は、独自の
  * ol.interaction.Interaction インスタンスを作成し、
  * ol.Map インスタンスを作成する前に、望む順番で 
  * ol.Collection にそれらを挿入する必要があります。（ol3 API）
  * new ol.interaction.DragRotateAndZoom()
  *（訳注：インターラクションの順番は、API を参照してください。）
  */

  new ol.interaction.PinchZoom({
  /**ol.interaction.PinchZoom
   * Allows the user to zoom the map by pinching with two 
   * fingers on a touch screen.
   * ユーザがタッチスクリーン上で２つの指で挟むことによってマッ
   * プをズームできるようにします。
   */

   constrainResolution: true // force zooming to a integer zoom
   /** constrainResolution
    * Zoom to the closest integer zoom level after the 
    * pinch gesture ends. Default is false.
    * 挟む動作終了後に最も近い整数のズームレベルにズームします。
    * デフォルトは、false。
    * （ol3 API　experimental）
    */

  })
 ]),
 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）
    */

  })
 ],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});