Mapbox GL JS 大規模で応答性の高いWebマップにおいて、GeoJSONのメモリ使用量を2～3倍削減します

Mapbox GL JS クライアント側でのGeoJSONデータの処理効率が向上し、GeoJSONソースのメモリ使用量が2～3分の1に削減されました。これにより、大規模なデータセットを扱う際のブラウザタブのクラッシュリスクが低減され、読み込み時や操作時においても、地図の表示がスムーズで応答性の高い状態を維持できます。これらすべて、コードの変更を一切必要とせずに実現されます。 

開発者は、メモリの節約分を活用して、既存のデータセットのパフォーマンスを向上させたり、レスポンシブな地図表示を維持しつつ、はるかに大規模なカスタムGeoJSONデータセットに対応したりすることができます。

デバイスの制限に引っかかることなく、データ可視化を拡張する

GeoJSONは、資産追跡から不動産物件情報、店舗の所在地、分析データに至るまで、開発者が独自のデータを地図に追加する際に主に使用するフォーマットです。こうしたデータセットが増大するにつれ、特にモバイル端末や低スペックのノートパソコンでは、メモリがボトルネックとなります。大規模なデータセットは、地図の表示速度を低下させたり、場合によってはブラウザのタブをクラッシュさせたりするほど、大量のメモリを消費する可能性があります。これらの改善により、GL JS は、はるかに大規模なデータセットも高いパフォーマンスで処理できるようになりました。

「Mapbox （GL JS ）で実装された新しいGeoJSONのメモリ効率改善機能を、24万件の米国ブロックグループを最高詳細度でレンダリングしてテストしました。これは、以前はChromeがクラッシュしてしまうようなデータセットでした。しかし今では、特別な前処理を必要とせずに、問題なく動作します。」

カイリー・ウォーカー、Xのアカウントは@kyle_e_walkerです

2つのライブラリへの大規模な更新により、GeoJSONのメモリ使用量が削減されました

Mapbox GL JS の中核をなす 2 つのオープンソースライブラリが、GeoJSON の背後で行われる作業の多くを処理しています：

• geojson-vt は、GeoJSON を動的にマップタイルに分割します。
• Superclusterは、大規模な点データセットを効率的にクラスターにグループ化します。

Mapbox 両ライブラリに、メモリ使用量を大幅に削減する大規模なアップデートをリリースしました。GL JS では、数百万もの小さなJavaScriptオブジェクトを格納する代わりに、整数座標を持つコンパクトな型付き配列を使用するようになりました。また、GL JS では、このストレージからタイルのジオメトリを直接読み込むため、タイルごとに一時的なコピーを作成する必要がなくなりました。

その結果、同じ地図が出力される一方で、メモリ使用量は大幅に削減されます。geojson-vtもSuperclusterもオープンソースであるため、これらの改善点は、これらを基盤として構築された地図作成ツールのエコシステム全体にも恩恵をもたらします。

GeoJSON ソースの場合、メモリ使用量が 2～3 分の 1 に削減されます

ベンチマーク用データセット全体で、メモリ使用量は45～75％減少しました。米国の郡に関する205 MBのデータセットの場合、GeoJSONインデックスの使用量は、従来の241 MBから103 MBになりました。

処理中のメモリ使用量のピーク値は、最大で79%減少しました。同じ郡のデータセットにおいて、負荷の高いワークロードのピーク値は、従来の1.9 GBから456 MBへと低下し、以前はクラッシュしやすかったワークロードも、ブラウザのメモリ制限内に余裕を持って収まるようになりました。

大規模環境におけるより効率的なクラスタリング

160万件の実世界の場所からなるデータセットの場合、クラスタリングに要するメモリ使用量は642 MBから82 MBへと減少し、87％の削減となりました。ピーク時のメモリ使用量も990 MBから470 MBへと減少しました。

マップの操作性が向上しました。 

処理とタイル生成の際に使用される一時メモリが大幅に削減されたため、ガベージコレクションによる処理中断が少なくなり、マップの読み込み中や移動中もレスポンスが維持されやすくなりました。

より大規模なデータセット。よりコンパクトなフットプリント。さあ、始めましょう。

パフォーマンスとカスタムデータ可視化は、開発者がMapbox を選択する主な要因となっています。Mapbox は、GL JS のパフォーマンス最適化に引き続き注力しており、今回のGeoJSONのメモリ使用量の改善もその一例です。すべてのGeoJSONソースのメモリ使用量を削減することで、これらの改善により、より多くのデータを可視化し、より多くのユーザーに対応し、より幅広いデバイスで高いパフォーマンスを実現することが可能になります。

これらの改善点を活用するには、GL JS をバージョン3.31以降に更新してください。コードの変更や新たな設定は不要で、既存のGeoJSONソースやクラスタ化されたレイヤーは自動的にその恩恵を受けられます。