fetchMap 関数を呼び出すには、CARTO Builder からコピーした地図 ID が利用できます。この関数はプラットフォームに接続し、指定したすべてのスタイリング プロパティを持つ deck.gl レイヤのコレクションを含む、可視化に必要なすべての情報を取得します。このレイヤのコレクションを使って、deck.gl GoogleMapsOverlay のインスタンスを作成し、地図に追加します。
BigQuery の大きな特徴の 1 つは、巨大なデータセットに対しても処理をスケールアウトできることです。CARTO プラットフォームでは、タイルセットという、あらかじめ生成されたベクトルタイルを含む空間的に最適化されたデータ構造を使って、非常に大きなデータセットを高速で可視化できます。タイルセットは BigQuery 内で Analytics Toolbox 関数を使用して数十億点を処理できる並列処理で生成されます。
このような大規模なデータセットの問題点は、一度にメモリに収まらないことです。そのため、タイルに分割して順にレンダリングする必要がある訳ですが、CARTO はこの点をあらかじめ考慮し、BigQuery で直接タイルセットを作成したり、オンザフライで動的に生成することができます。
ライブデータについて
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 に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
