昨年 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 億点の船舶データを可視化した以下のサンプルを見てみましょう。
 |
| カスタム タイルセットでレンダリングした 170 億点のデータセット |
ライブデータについて
BigQuery は継続的に更新されるストリーミング データをサポートしています。このシナリオでは、データの変化に応じて、一定間隔で可視化を更新できるように設定しています。deck.gl を使用すれば可視化情報を更新することは簡単です。地図の取得時に autoRefresh パラメータを true に設定し、新しいデータがダウンロードされたときに実行したい関数を指定するだけです。
const {layers} = await deck.carto.fetchMap({
cartoMapId,
autoRefresh: true,
onNewData: (parsedMap) => { … }
});
BigQuery のコンソールで INSERT 関数を使ってテーブルにポイントを追加し、地図上でリアルタイムにデータが更新されるのを見ることができます。
 | |
| BigQuery のデータセットをオンザフライで更新し、CARTO で可視化することが可能です |
さらに詳しく見てみましょう
上に示したようなシンプルな可視化の方法に加え、deck.gl は、広範囲に可視化する柔軟性を備えています。CARTO プラットフォームはデータ ウェアハウスからデータにアクセスし、高度な地図作成機能でデータを可視化する機能を提供します。さらに、deck.gl レイヤカタログで利用できる高度な可視化によって、機能を拡張できます。
deck.gl のコードをさらにコントロールするための追加オプションが 2 つあります。1 つ目は、fetchMap を使用せずに、直接 CartoLayer を使用する方法です。この場合、CARTO プラットフォーム側で接続対象の地図データの設定と、データソースのタイプ・名前、クエリやスタイル プロパティなどを指定する必要がありますが比較的容易に可視化レイヤを生成可能です。
const overlay = new deck.GoogleMapsOverlay({
layers: [
new deck.carto.CartoLayer({
connection: 'bqconn',
type: deck.carto.MAP_TYPES.TABLE,
data: `cartobq.public_account.retail_stores`,
getFillColor: [238, 77, 90],
pointRadiusMinPixels: 6,
}),
],
});
2 つ目は、fetchLayerData関数を使用する方法です。この関数は、BigQuery とアプリケーション間のデータ転送に使用されるフォーマットをさらにコントロールすることが可能で、ArcLayer、H3HexagonLayer、TripsLayer などの特定のデータ形式を必要とする高度な可視化において使用できます。
deck.carto.fetchLayerData({
type: deck.carto.MAP_TYPES.TABLE,
source: `cartobq.geo_for_good_meetup.texas_pop_h3`,
connection: 'bqconn',
format: deck.carto.FORMATS.JSON,
credentials: {
accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfbHFlM3p3Z3UiLCJqdGkiOiI1YjI0OWE2ZCJ9.Y7zB30NJFzq5fPv8W5nkoH5lPXFWQP0uywDtqUg8y8c'
}
}).then(({data}) => {
const layers= [
new deck.H3HexagonLayer({
id: 'h3-hexagon-layer',
data,
extruded: true,
getHexagon: d => d.h3,
getFillColor: [182, 0, 119, 150],
getElevation: d => d.pop,
elevationScale: 2.5,
parameters: {
blendFunc: [luma.GL.SRC_ALPHA, luma.GL.DST_ALPHA],
blendEquation: luma.GL.FUNC_ADD
}
})
];
const overlay = new deck.GoogleMapsOverlay({layers});
overlay.setMap(map);
});
両方のオプションを使用した完全なコードは、こちらのサンプルをご覧ください。
 |
| Google Maps Platform と CARTO による deck.gl Hexagon Layer の可視化の使用例 |
詳しい情報は
deck.gl のドキュメント ウェブサイトと CARTO のドキュメント センターで、デモやドキュメントにアクセスできます。ご不明な点がある場合は、CARTO Users Slack ワークスペースにて、CARTO チームにお問い合わせください。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer