2 - ol3.2ex 67b -Accessibility example 2

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

「267-ol3ex.js」

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

  })
 ],

 renderer: exampleNS.getRendererFromQueryString(),
 /** 'example-behavior.js' により URL にある renderer を返します */

 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: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

jQuery('#map').after('<button type="button" ' +
/** .after()
 * Insert content, specified by the parameter, after 
 * each element in the set of matched elements.
 * マッチしたエレメントのセットの各エレメントの後に、パラ
 * メータによって指定されたコンテキストを挿入します。(
 * （jQuery[http://api.jquery.com/after/]）
 */

 'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
 /** getView()
  * Get the view associated with this map. A view 
  * manages properties such as center and resolution.
  * このマップと関連するビューを取得します。ビューは、
  * 中心や解像度のような属性を管理します。
  * Return: The view that controls this map.（ol3 API）
  */

 /** setZoom(zoom)
  * Zoom to a specific zoom level.
  * 指定したズームレベルにズームします。（ol3 API）
  */

 /** getZoom()
  * Get the current zoom level. Return undefined if 
  * the current resolution is undefined or not a 
  * "constrained resolution".
  * 現在のズームレベルを取得します。現在の解像度が未定義か
  * 「制約解像度」の場合は undefined を返します。（ol3 API）
  */

 'Zoom out</button>');

jQuery('#map').after('<button type="button" ' +
 'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
 'Zoom in</button>');