Fetch APIのStream機能を使ってデータを読み込みながら地図を描画する

最終更新日

地理空間データはどうしてもデータサイズが大きくなりがちです。
通常のデータ読み込みでは、読み込みが終わるまで地図の描画を始めることができないのですが、Fetch APIのReadableStreamを使うことで、「一部データを読み込んでは地図の一部分を描画する」という分割したレンダリングを実装することができます。

サンプルコード

GeoData Feach Stream

約50MBのポリゴンデータを読み込みながら逐次描画しています。

DEMO

ブラウザ対応

推奨環境

  • 最新版 Chrome
  • 最新版 Safari Mobiled

Fetch API - Web API インターフェイス | MDN

とりあえず、IE、Firefoxでは動きません。IEはそもそもFetch APIに未対応、FirefoxはReadableStreamのResponse bodyが未サポートのためです。
chromeは問題無し。また、MDNのページではSafari, Safari Mobileが未サポートとなっていますが、手元の環境(Safari 11.1 / iOS 11.3.1)で確認したところどちらも問題なく動作しました。

一部解説

GeoJSONファイルの分割

ストリームで使いやすいように、GeoJSONをfeatures単位で分割し一行ごとのJSONとしてテキストファイルに保存しています。

Streeming APIで読み込む

Streamから受けっとたchunkをbufferに溜め、改行コードを目印に分割してJSONを読み込み元のオブジェクトに変換しています。

ReadableStream - Web APIs | MDN

地図を描画する(SVG)

chunkから取り出したJSONをD3で描画するコードです。
しかしデータ量が多いとSVGエレメント数も比例して多くなるので、この方法は非推奨です。
詳しくは「地図を描画する(Canvas)」を参照してください。

地図を描画する(canvas)

chunkから取り出したJSONをD3でcanvasに描画するコードです。
この方法だと、データ量の多い地理情報もある程度まで描画することができます。
これ以上のサイズになるとWebGLなどを利用する必要があります。