Fetch APIのStream機能を使ってデータを読み込みながら地図を描画する地理空間データはどうしてもデータサイズが大きくなりがちです。 通常のデータ読み込みでは、読み込みが終わるまで地図の描画を始めることができないのですが、Fetch APIのReadableStreamを使うことで、「一部データを読み込んでは地図の一部分を描画する」という分割したレンダリングを実装することができます。 サンプルコード 約50MBのポリゴンデータを読み込みながら逐次描画しています。 DEMO //地理データをstreamを使って読み込む fetch("city.txt").then((response) => { const reader = response.body.getReader(); const stream = new ReadableStream({ start(controller) { function push() { reader.read().then(
