2 - ol3.13ex 150b - Export PDF example 2

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

jsPDF は、MrRio/jsPDF-GitHub（https://github.com/MrRio/jsPDF）に、

Generate PDF files in client-side JavaScript.
クライアント側で PDF ファイルを生成する JavaScript。

とあります。


「2150-ol3ex.js」

var raster = 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()
 /** source:
  * Source for this layer. Required.（ol3 API）
  */

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

});

var format = new ol.format.WKT();
/** ol.format.WKT 
 * Geometry format for reading and writing data in the 
 * WellKnownText (WKT) format.
 * WellKnownText（WKT）フォーマットのデータを読み書きする
 * ためジオメトリフォーマット。（ol3 API）
 */

var feature = format.readFeature(
/** readFeature
 * Read a feature from a WKT source.
 * WKT ソースからフィーチャを読み取ります。（ol3 API）
 */

 'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
  '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
  '-39.1552734375, 10.689697265625 -25.0927734375))');

feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
/** getGeometry()
 * Get the feature's default geometry. A feature may 
 * have any number of named geometries. The "default" 
 * geometry (the one that is rendered by default) is 
 * set when calling ol.Feature#setGeometry.
 * フィーチャのデフォルトのジオメトリを取得します。フィー
 * チャは、任意の数の指定のジオメトリのを有することができ 
 * ます。「デフォルト」のジオメトリ（デフォルトでレンダリ
 * ングされるもの）が ol.Feature＃setGeometry を呼び出すと
 * きに設定されています。（ol3 API）
 */

/** transform(source, destination)
 * Transform each coordinate of the geometry from 
 * one coordinate reference system to another. The 
 * geometry is modified in place. For example, a 
 * line will be transformed to a line and a circle 
 * to a circle. If you do not want the geometry 
 * modified in place, first clone() it and then use 
 * this function on the clone.
 * ある座標参照系から別のものへジオメトリの各座標を変換
 * します。ジオメトリは、所定の位置に修正されます。例え
 * ば、線は線へ円は円へ変換されます。ジオメトリを所定の
 * 位置に変更したくない場合は、最初にそれを clone() し
 * て、それから clone に関してこの関数を使用します。
 * （ol3 API）
 */

var vector = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されるベクタデータ。（ol3 API）
 */

 source: new ol.source.Vector({
 /** source:
  * Source. Required.（ol3 API）
  */

 /** ol.source.Vector
  * Provides a source of features for vector layers. 
  * Vector features provided by this source are 
  * suitable for editing. See ol.source.VectorTile for 
  * vector data that is optimized for rendering.
  * ベクタレイヤのフィーチャのソースを用意します。このソース
  * が提供するベクタフィーチャは、編集に適しています。レンダ
  * リングのために最適化されたベクタデータの 
  * ol.source.VectorTile を参照してください。（ol3 API）
  */

  features: [feature]
  /** features:
   * Features. If provided as ol.Collection, the features 
   * in the source and the collection will stay in sync.
   * フィーチャ。ol.Collection として提供された場合、ソース内
   * のフィーチャとコレクションが同期したままになります。
   * （ol3 API）
   */

 })
});

var map = new ol.Map({
 layers: [raster, vector],
 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(opt_options)
  * Set of controls included in maps by default. Unless 
  * configured otherwise, this returns a collection 
  * containing an instance of each of the following 
  * controls:
  * デフォルトでは、マップに含まれたコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(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 dims = {
 a0: [1189, 841],
 a1: [841, 594],
 a2: [594, 420],
 a3: [420, 297],
 a4: [297, 210],
 a5: [210, 148]
};

var loading = 0;
var loaded = 0;

var exportButton = document.getElementById('export-pdf');

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

 exportButton.disabled = true;
 document.body.style.cursor = 'progress';

 /** progress
  * バックグラウンドでプログラムがビジー状態であるが、まだユーザ
  * による操作が可能である状態を示す（※ wait とは異なる）
  * （MDN[https://developer.mozilla.org/ja/docs/Web/CSS
  * cursor]）
  */

 var format = document.getElementById('format').value;
 var resolution = document.getElementById('resolution').value;
 var dim = dims[format];

 var width = Math.round(dim[0] * resolution / 25.4);
 /** Math.round()
  * 引数として与えた数を四捨五入して、最も近似の整数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/round]）
  */

 var height = Math.round(dim[1] * resolution / 25.4);

 var size = /** @type {ol.Size} */ (map.getSize());
 /** getSize()
  * Get the size of this map.
  * Returns: The size in pixels of the map in the DOM.
  * マップのサイズを取得。（ol3 API）
  */

 var extent = map.getView().calculateExtent(size);
 /** 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）
  */

 /** calculateExtent(size)
  * Calculate the extent for the current view state and 
  * the passed `size`. `size` is the size in pixels of 
  * the box into which the calculated extent should fit. 
  * In most cases you want to get the extent of the 
  * entire map, that is `map.getSize()`. 
  * 現在のビューステートと渡された`size`の範囲を計算します。 
  * `size`は、計算された範囲に収まるボックスのピクセル単位
  * のサイズです。ほとんどの場合、マップ全体の範囲を取得しま
  * すが、それは`map.getSize（）`です。（ol3 API）
  */

 var source = raster.getSource();
 /** getSource()
  * Return the associated tilesource of the the layer.
  * タイルレイヤの関連するタイルソースを返します。（ol3 API）
  */

 var tileLoadStart = function() {
  ++loading;
 };

 var tileLoadEnd = function() {
  ++loaded;
  if (loading === loaded) {
   var canvas = this;

   window.setTimeout(function() {
   /** setTimeout(func, dylay)
    * 指定された遅延の後に、コードの断片または関数を実行します。
    * func : delay ミリ秒後に実行したい関数。
    * delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
    * （MDN[https://developer.mozilla.org/ja/docs/Web/
    * API/Window/setTimeout]）
    */

    loading = 0;
    loaded = 0;

    // var data = canvas.toDataURL('image/png');
    var data = canvas.toDataURL('v3.13.0/examples/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]）
    */

    var pdf = new jsPDF('landscape', undefined, format);
    /** jsPDF(orientation, unit, format) 
     * Creates new jsPDF document object instance.
     * 新しい jsPDF ドキュメントオブジェクトインスタンスの作成し
     * ます。（jsPDF doc）
     */

    pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
    pdf.save('map.pdf');

    source.un('tileloadstart', tileLoadStart);
    /** un(type, listener, opt_this)
     * Unlisten for a certain type of event.
     * あるタイプのイベントをリッスンしません。（ol3 API）
     */

    source.un('tileloadend', tileLoadEnd, canvas);
    source.un('tileloaderror', tileLoadEnd, canvas);

    map.setSize(size);
    /** setSize(size)
     * Set the size of this map.
     * このマップのサイズを設定します。
     * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    map.getView().fit(extent, size);
    /** 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）
     */

    /** fit(geometry, size, opt_options)
     * Fit the given geometry or extent based on the given 
     * map size and border. The size is pixel dimensions of 
     * the box to fit the extent into. In most cases you 
     * will want to use the map size, that is map.getSize(). 
     * Takes care of the map angle.
     * 指定されたマップのサイズと境界線に基づいて、指定されたジ
     * オメトリまたは範囲を合わせます。サイズは範囲に合わせてピ
     * クセル寸法のボックスです。ほとんどの場合、マップのサイズ
     * を使用しますが、それは map.getSize（）。マップアングルに
     * 注意してください。
     * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

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

    exportButton.disabled = false;
    document.body.style.cursor = 'auto';
   }, 100);
  }
 };

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

  source.on('tileloadstart', tileLoadStart);
  /** un(type, listener, opt_this)
   * Listen for a certain type of event.
   * あるタイプのイベントをリッスンします。（ol3 API）
   */

  source.on('tileloadend', tileLoadEnd, event.context.canvas);
  source.on('tileloaderror', tileLoadEnd, event.context.canvas);
 });

 map.setSize([width, height]);
 map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
 map.renderSync();

}, false);