Google Maps Platform と deck.gl を使用し、CARTO プラットフォームで高度なデータの可視化を実現する方法
昨年 10 月に開催された Google Cloud Next で、Google チームは地理空間情報企業である CARTO と vis.gl Technical Steering Committee（TSC）との連携により、deck.gl 可視化ライブラリの最新リリースを発表しました。deck.gl のリリースには、Maps JavaScript API の WebGL による新機能との緊密なインテグレーションが含まれており、ベースマップ上で直接 2D ・ 3D のいずれも可視化できるようになりました。
CARTO のチームは、テキサス州のトラックを電化できる可能性を示す各種データソースを可視化したサンプルアプリを作成しました。このアプリは、Google Maps Platform と deck.gl で作成できる、さまざまなタイプの高度なデータの可視化を紹介しています。そこで、皆様に、可視化のためのデータソースと、CARTO プラットフォームがどのように可視化を実現しているのかについてご紹介します。
Google Cloud は、地理空間クエリをサポートするサーバーレス データ ウェアハウス ソリューションである BigQuery を提供します。空間データを扱う場合、データセットを探索し可視化する地図を作成することは、重要かつ一般的に必要とされていることです。CARTO Spatial Extension for BigQuery は、データ ウェアハウスへの接続を作成し、BigQuery テーブルからのデータで地図を設計し、deck.gl を使用してウェブアプリで可視化する簡単な方法を提供します。
 |
| CARTO Builder から Map ID を取得する例 |
 |
| CARTO Builder で直接、地図に各種カスタム スタイルを適用可能 |
シンプルな地図の作成
CARTO プラットフォームを使用してシンプルな地図を作成するには、体験版アカウントに登録します。ログインすると、サービス アカウントを使用して BigQuery インスタンスと接続するように設定できます。設定したら Data Explorer に移動して、利用可能なデータセットを確認し、地図でデータソースとして使用したいテーブルを見つけます。詳細については、CARTO ドキュメントをご確認ください。
 |
| CARTO Builder の Data Explorer で、さまざまな地理空間データセットをプレビューできます |
テキサス州の送電線を可視化するために、まずテキサス州の行政界情報を引き出す所から始めると、概況がつかめます。Data Explorer でテーブルをプレビューし、右上の [Create map] ボタンをクリックし、可視化の設定作業を開始します。
地図作成ツールである CARTO Builder を使用して、背景地図として利用可能な Google のベクターベースマップのスタイルの中から 1 つを選び、レイヤスタイルをカスタマイズします。
 |
| CARTO Builder で表示される実行済みの地理空間クエリの結果 |
SELECT *
FROM cartobq.nexus_demo.transmission_lines
WHERE ST_INTERSECTS(
geometry,
(SELECT geom FROM cartobq.nexus_demo.texas_boundary_simplified)
);
 |
| CARTO Builder で実行される地理空間クエリの例 |
[Run] ボタンをクリックすると、Google Cloud の BigQuery 側でクエリが実行されます。結果は Builder ツールに返送され可視化されます。新しいレイヤでスタイルのカスタマイズをすれば、地図表現の準備は完了です。
 |
| 結果は、BigQuery から返され、自動的に可視化されます |
Google Maps Platform アプリケーションに地図を追加する前に地図を公開する必要があります。[Share] ボタンをクリックして、[Developers] タブを選び、地図 ID をコピーします。
 |
| Google Maps Platform ウェブ SDK とモバイル SDK で使用するための地図 ID を CARTO Building の共有メニューから生成します。 |
あとは、以下の 4 行のコードを追加するだけで、Google Maps Platform アプリケーションで CARTO で設定した主題図を可視化できます。
const cartoMapId = 'b502bf53-877d-4e89-b5ad-71982cac431d';
deck.carto.fetchMap({cartoMapId}).then(({layers}) => {
const overlay = new deck.GoogleMapsOverlay({layers});
overlay.setMap(map);
});
fetchMap 関数を呼び出すには、CARTO Builder からコピーした地図 ID が利用できます。この関数はプラットフォームに接続し、指定したすべてのスタイリング プロパティを持つ deck.gl レイヤのコレクションを含む、可視化に必要なすべての情報を取得します。このレイヤのコレクションを使って、deck.gl GoogleMapsOverlay のインスタンスを作成し、地図に追加します。
完全なサンプルはこちらのこちらからご覧ください。
 |
| JSFiddle で利用可能な完全なサンプル |
非常に大規模なデータセットの可視化
BigQuery の大きな特徴の 1 つは、巨大なデータセットに対しても処理をスケールアウトできることです。CARTO プラットフォームでは、タイルセットという、あらかじめ生成されたベクトルタイルを含む空間的に最適化されたデータ構造を使って、非常に大きなデータセットを高速で可視化できます。タイルセットは BigQuery 内で Analytics Toolbox 関数を使用して数十億点を処理できる並列処理で生成されます。
例えば、前述の米国の送電線の全データセット、100 MB 以上のジオメトリでタイルセット機能を使用して可視化できます。
このような大規模なデータセットの問題点は、一度にメモリに収まらないことです。そのため、タイルに分割して順にレンダリングする必要がある訳ですが、CARTO はこの点をあらかじめ考慮し、BigQuery で直接タイルセットを作成したり、オンザフライで動的に生成することができます。
 |
| BigQuery で生成され、CARTO Builder で表示されるタイルセット |
この方法で地図にデータを読み込むと、必要な範囲だけをレンダリングすることが可能です。例えば、170 億点の船舶データを可視化した以下のサンプルを見てみましょう。
 |