Google Maps Platform

Google Maps Platform で deck.gl を使用して充実したデータの可視化を実現

2021年10月22日

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/deckgl_animations_2.gif

Google Cloud Japan Team

※この投稿は米国時間 2021 年 10 月 12 日に、Google Cloud blog に投稿されたものの抄訳です。

Google Cloud Next では、最新のオープンソースデータ可視化ライブラリ deck.gl（バージョン 8.6）をご紹介しました。このリリースでは、ロケーションインテリジェンスプラットフォーム CARTO、vis.gl Technical Steering Committee（TSC）、Google Maps Platform および Google Cloud のチームとの密接な連携により、Maps JavaScript API の WebGL Overlay View 機能と deck.gl の緊密な統合を実現しました。この統合により、2D と 3D といった形式でデータを美しく可視化し、さまざまな知見を得ることができる deck.gl の機能を活用して、新たなレベルのデータマッピングエクスペリエンスを作り出せます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/deck_gl_examples.max-800x800.png

deck.gl と WebGL Overlay View の統合により実現したさまざまな可視化の例。

この新しい可視化機能は、地理空間情報を使用する、あらゆるユースケースでご活用いただけます。CARTO チームは、deck.gl と Maps JavaScript API の統合による優れた機能を示すために、テキサス州で電気トラックの可能性を示す各種データソースを可視化したサンプルアプリを作成しました。このサンプルアプリでは、WebGL を利用したマップ機能ツールと deck.gl によって、CARTO がテキサス州の面積と人口の規模を、完全にインタラクティブな地図として可視化した様子がわかります。

https://storage.googleapis.com/gweb-cloudblog-publish/images/CARTO_app_updated.max-1300x1300.png

deck.gl を使用して、テキサス州のトラックを電化できる可能性を可視化した CARTO のストーリーマップ

deck.gl と Maps JavaScript API が連携する

deck.gl は、これまで Maps JavaScript API のラスターベースマップをサポートしてきました。今回の新しいリリースでは、インターリーブモードでのベクターベースマップもサポートされるようになります。deck.gl によって Google のベクター地図とデータレイヤを組み合わせることができるようになるため、ラベルや 3D などのコンテンツを損ねることなく深度とオクルージョン（手前にある物体が背後にある物体を隠す状態）を確保した完璧なレンダリングを行う、ピクセルパーフェクトな可視化を実現できます。

具体的な仕組みとしては、同じ WebGL レンダリングコンテキストをベクターベースマップと deck.gl が共有することで、地図上にレンダリングされる描画のパフォーマンスと柔軟性が向上します。つまり、deck.gl によって地図上にレンダリングされて可視化されるのではなく、地図の一部としてレンダリングされるようになりました。この WebGL コンテキストの共有は容易ではないため、Google Maps Platform チームと CARTO チームが協力して両社のライブラリを進化させ、サポートを提供しています。

例を見てみましょう。

以下のコードでは、オープンソースライブラリの loaders.gl を使用して CSV ファイルからデータを読み込み、deck.gl の可視化レイヤである Hexagon Layer と Google Maps Platform 用のオーバーレイを作成して、最終的に地図に追加しています。