2 - ol3ex 46b - Full screen drag rotate and zoom example 2

「full-screen-drag-rotate-and-zoom.js（246-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「246-ol3ex.js」

var map = new ol.Map({

 controls: ol.control.defaults().extend([
 /** 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
  */

  new ol.control.FullScreen()
  /** ol.control.FullScreen 
   * Provides a button that when clicked fills up the 
   * full screen with the map. When in full screen mode, 
   * a close button is shown to exit full screen mode. 
   * The Fullscreen API is used to toggle the map in 
   * full screen mode.
   * クリックされたとき、マップと共にフルスクリーンにするボタ
   * ンを提供します。フルスクリーンモードで、閉じるボタンは、
   * フルスクリーンモードを終了するように示されています。フル
   * スクリーン API は、フルスクリーンモードでマップを切り替
   * えるために使用されます。（ol3 API）
   */

 ]),

 interactions: ol.interaction.defaults().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）
  * （訳注：インターラクションの順番は、APIを参照してください。）
  */

  new ol.interaction.DragRotateAndZoom()
  /** ol.interaction.DragRotateAndZoom 
   * Allows the user to zoom and rotate the map by 
   * clicking and dragging on the map. By default, 
   * this interaction is limited to when the shift 
   * key is held down.
   * This interaction is only supported for mouse 
   * devices.
   * And this interaction is not included in the 
   * default interactions.
   * マップ上をクリックとドラッグすることで、マップをズーム
   * し、回転することを許可します。デフォルトでは、このイン
   * ターラクションは、シフトキーを押しているときに制限され
   * ています。
   * このインターラクションは、マウスデバイスだけサポートし
   * ます。
   * このインターラクションは、デフォルトのインターラクショ
   * ンに含まれません。（ol3 API）
   */

 ]),

 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.BingMaps({
   /** ol.source.BingMaps
    * Layer source for Bing Maps tile data.
    * Bing Maps タイルデータのレイヤソース。（ol3 API）
    */

    key: 'Ak-dzM...（省略）',
    imagerySet: 'Aerial'
   })
  })
 ],

 // Use the canvas renderer because it's currently the fastest

 target: 'map',
 view: new ol.View({
  center: [-33519607, 5616436],

  rotation: -Math.PI / 8,
  /** Math.PI
   * 円周率。約 3.14159 です。
   * （MDN[https://developer.mozilla.org/ja/docs/Web
   * /JavaScript/Reference/Global_Objects/Math/PI]）
   */

  zoom: 8
 })
});