

openlayer3 Export PDF 出力待ち状態が終わらない。  
『<http://openlayers.org/en/latest/examples/export-
pdf.html>』を参考にマップのＰＤＦ出力(新潟県、拡大／縮小有りで)を作成するつもりで、このopenlayer3のサンプルをコピーし作り掛けたのです。  
しかし、ローカルにコピーして動作はするのですが、拡大をして  
Export PDFボタンクリックを何回か行うと待ち状態になり終了しない。待ち状態(マウスカーソル変わる)で拡大／縮小を行うと  
動き出す。  
ローカルにコピーしたときにミスが有ったかもしれないので、上記のURLで同じことを行い再現したので、もともと有ったの問題と思います。  
ネットで調べても有力な方法が見つかりません。  
少しFirefoxデバッカーで調べたら、  
map.getView().fit(extent, (map.getSize()));  
でサーバーにリクエストが出ないときこの状態に成ってます。  
.fitのol3 api ドキュメントが見つかりません。  
回避策お解りの方、教えて下さいお願いします。


CC BY-SA 3.0
2016-08-26T04:11:09.170
28503
2018-08-22T10:56:18.463
18603
question
javascript
openlayer3 Export PDF が出来ない


追記(18/8/22): キャッシュの有無に関わらず、読み込みと描画が完了してから発火される `rendercomplete`
というイベントが追加されました。ご指摘のサンプルもそれを使うように修正されたため、Export PDF
ボタンを連続でクリックしても機能するようになっています。

※まだmasterブランチにマージされただけなので、リリースは v5.2.0 あたりになる気がします。

[Add 'rendercomplete' event by ahocevar · Pull Request #8532 ·
openlayers/openlayers](https://github.com/openlayers/openlayers/pull/8532)

* * *

そのサンプルの大筋は次のようになっています。

  1. 指定された用紙サイズ・解像度に合わせて表示領域をサイズ変更
  2. その状態でもともと表示されていた領域に合うように縮尺などを調整([`ol.View.fit()`](https://stackoverflow.com/a/33069442/2818869))
  3. 上記調整に伴いタイルの読み込みが発生するので、読み込み完了まで待機  
(`map.once('postcompose', ...` のあたりでイベントリスナを登録しています)

  4. 現在表示されている画像をPDF化(`tileLoadEnd` 内)
  5. 表示領域を元のサイズに戻す

問題のケースでは、タイルの読み込み状況を表す `tileload`
系のイベントが発生しておらず、3のタイル読み込み待ちで止まってしまうようです。推測ですが、既に読み込まれてキャッシュされているタイルについてはこのイベントが発生しないのではないでしょうか。

回避策としては次のようなものを見つけました。

  * タイル読み込みイベントではなく、 `postrender` イベントを使う
  * `postcompose` イベントから一定時間経っても `tileloadstart` が発生しなければ、全て読み込み済みと判断してPDF生成に移る
  * 同イベント内で `source.refresh()` を使い、タイルを強制的に読み込ませる

~~1番目の方法であればタイルの読み込み管理も不要になります。~~ ただし `postrender` イベントでは `<canvas>`
要素を取得できず、また[タイルの読み込みが完了していなくても発火される](https://github.com/openlayers/openlayers/issues/5780#issuecomment-242873482)ようなので、他のイベントと組み合わせる必要がありそうです。

参考 [Ensuring all tiles are loaded in Open Layers 3 XYZ source - Stack
Overflow](https://stackoverflow.com/a/33069442/2818869)


CC BY-SA 4.0
2016-08-26T09:31:52.210
28510
2018-08-22T10:56:18.463
2018-08-22T10:56:18.463
8000
8000
28503
answer