2 - ol3.3ex 82b - Export map example 2

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

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({

   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  }),
  new ol.layer.Vector({

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

    projection: 'EPSG:3857',
    // url: 'data/geojson/countries.geojson'
    url: 'v3.3.0/examples/data/geojson/countries.geojson'
   })
  })
 ],
 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
 })
});

var exportPNGElement = document.getElementById('export-png');

if ('download' in exportPNGElement) {

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

  map.once('postcompose', function(event) {
  /** once()
   * Listen once for a certain type of event.
   * あるタイプのイヴェントを１回リッスンします。
   * Return: Unigue key for the listener.（ol3 API）
   */

  /** postcompose　イベント
   * レイヤを描画した後に発生するイベント。
   * （「Layer spy example」参照）
   */

   var canvas = event.context.canvas;

   exportPNGElement.href = canvas.toDataURL('image/png');
   /** HTMLCanvasElement.toDataURL()
    * The HTMLCanvasElement.toDataURL() method returns a 
    * data URIs containing a representation of the image 
    * in the format specified by the type parameter 
    * (defaults to PNG). The returned image is in a 
    * resolution of 96 dpi.
    * HTMLCanvasElement.toDataURL() メソッドは、型引数
    * （デフォルトは PNG）で指定したフォーマットの画像の表現を
    * 含むデータのURIを返します。返された画像は、96dpi の解像
    * 度です。
    * （MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/HTMLCanvasElement/toDataURL]）
    */

  });

  map.renderSync();
  /** renderSync()
   * Requests an immediate render in a synchronous manner.
   * 同期即時描画を要求します。（ol3 API）
   */

 }, false);
 } else {

 var info = document.getElementById('no-download');
 /**
  * display error message
  */
 info.style.display = '';
}