2 - ol3.2ex 71b -OverviewMap control, advanced 2

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

「271-ol3ex.js」

var overviewMapControl = new ol.control.OverviewMap({
/** new ol.control.OverviewMap(opt_options)
 * Create a new control with a map acting as an 
 * overview map for an other defined map.
 * もうひとつの定義されたマップの概要マップとして
 * 動作するマップで新しいコントロールを作成します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

/** see in overviewmap-custom.html to see the 
 * custom CSS used
 * 使用されたカスタム CSS を知るために 
 * overviewmap-custom.html をみてください。
 */

 className: 'ol-overviewmap ol-custom-overviewmap',
 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）
    */

    'url': '//{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
   })
  })
 ],

 collapseLabel: '\u00BB',
 /** collapseLabel:
  * Text label to use for the expanded overviewmap 
  * button. Default is «. Instead of text, also a 
  * Node (e.g. a span element) can be used.
  * overviewmap 展開ボタンに使用されるテキストラベル。
  * デフォルトは、 << です。テキストの替りに、ノード（例えば、
  * span エレメント）が使用できます。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 label: '\u00AB',
 /** collapseLabel:
  * Text label to use for the expanded overviewmap 
  * button. Default is «. Instead of text, also a 
  * Node (e.g. a span element) can be used.
  * overviewmap 折りたたみボタンに使用されるテキストラベル。
  * デフォルトは、 .. です。テキストの替りに、ノード（例えば、
  * span エレメント）が使用できます。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 collapsed: false // 折りたたみ
});

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

  overviewMapControl
 ]),

 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）
  * new ol.interaction.DragRotateAndZoom()
  * （訳注：インターラクションの順番は、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.
   * マップ上をクリックとドラッグすることで、マップをズームし、
   * 回転することを許可します。デフォルトでは、このインターラク
   * ションは、シフトキーを押しているときに制限されています。
   * このインターラクションは、マウスデバイスだけサポートします。
   * 阻止t,このインターラクションは、デフォルトのインターラク
   * ションに含まれません。（ol3 API）
   */

 ]),
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 target: 'map',
 view: new ol.View({
  center: [500000, 6000000],
  zoom: 7
 })
});