このページは Cloud Translation API によって翻訳されました。

BigQuery と Datasets API によるデータの可視化

このドキュメントでは、Google Cloud Platform BigQuery と Google Maps Platform Datasets API で位置情報を使用して地図データを可視化するためのリファレンスアーキテクチャと例を示します。たとえば、公開されている地方自治体データの分析、通信範囲マップの作成、モバイル車両の移動のトレースの可視化などを行います。

地図データの可視化は、ユーザーを惹きつけ、位置情報から空間インサイトを明らかにするための強力なツールです。位置情報は、ポイント、ライン、またはポリゴンの対象物を含むデータです。たとえば、天気情報マップは、消費者の移動状況を把握して旅行を計画し、暴風雨に備える際に役立ちます。ビジネスインテリジェンスマップは、データ分析からインサイトを得るのに役立ちます。通信マップは、特定のサービス提供地域におけるプロバイダのサービス提供範囲と品質を把握するのに役立ちます。

しかし、大規模な地図データを高パフォーマンスで優れたユーザーエクスペリエンスを提供できるように可視化することは、アプリデベロッパーにとって困難です。サイズの大きいデータはクライアント側のメモリに読み込む必要があるため、最初の地図の読み込みに時間がかかります。メモリや GPU に制約があるローエンドのスマートフォンを含むすべてのデバイスで、ビジュアルのパフォーマンスが向上する。最後に、デベロッパーは、大量のデータに対して移植性、信頼性、パフォーマンスに優れた大規模なデータレンダリングライブラリを選択する必要があります。

リファレンスアーキテクチャ

大規模なデータを可視化するアプリを開発するには、2 つの主要コンポーネントが必要です。

お客様のバックエンド - 処理や保存など、バックエンドのすべてのアプリデータとサービス。
顧客クライアント - 地図可視化コンポーネントを含むアプリのユーザーインターフェース。

以下のシステム図は、これら 2 つのコンポーネントが、大規模なデータ可視化アプリを作成するために、アプリユーザー、Google Cloud、Google Maps Platform とどのようにやり取りするかを示しています。

アーキテクチャ図

⭐ 注: Maps Datasets API は、pre-GA プロダクトです。詳しくは、利用規約をご覧ください。

設計上の考慮事項

Google Cloud と Google Maps Platform を使用してパフォーマンスの高いデータ可視化を実現するには、設計上のさまざまな考慮事項があります。

ソースデータのサイズと更新頻度。
1. geojson 形式のソースデータが 5 MB 未満の場合、または頻繁に更新される（リアルタイムの気象レーダー予報など）場合は、アプリのクライアントサイドで Geojson オブジェクトとしてデータを提供し、deck.gl レイヤでレンダリングすることを検討してください。
2. データのサイズが 5 MB を超え、更新頻度が 1 時間に 1 回以下の場合は、このドキュメントの Datasets API アーキテクチャを検討してください。
  1. データセットは、最大 350 MB のサイズのファイルをサポートします。
  2. データが 350 MB を超える場合は、データセットに渡す前に、ソースファイル内のジオメトリデータをプルーニングまたは単純化することを検討してください（下記の「データのプルーニング」をご覧ください）。
スキーマと形式
1. データに、特徴ごとにグローバルに一意の ID プロパティがあることを確認します。一意の ID を使用すると、特定の対象物を選択してスタイルを設定したり、データを対象物に結合して可視化したりできます。たとえば、「クリック」ユーザーイベントで選択した対象物のスタイル設定などが可能になります。
2. Datasets API の仕様に沿って、有効な列名、データ型、GeoJSON オブジェクトの型を使用して、データを CSV または GeoJSON としてフォーマットします。
3. BigQuery からデータセットを簡単に作成するには、SQL CSV エクスポートに wkt という名前の列を作成します。データセットでは、wkt という名前の列から Well-Known Text（WKT）形式の CSV からジオメトリをインポートできます。
4. データが有効なジオメトリとデータ型であることを確認します。たとえば、GeoJSON は WGS84 座標系、ジオメトリの巻き順などにする必要があります。
5. geojson-validate などのツールを使用して、ソースファイル内のすべてのジオメトリが有効であることを確認するか、ogr2ogr を使用してソースファイルの形式や座標系を変換します。
データのプルーニング
1. 特徴のプロパティの数を最小限に抑える。一意の識別子キーで、実行時に追加のプロパティを機能に結合できます（例）。
2. プロパティオブジェクトには、可能な限り整数データ型を使用してタイルの保存容量を最小限に抑え、クライアントアプリで HTTPS を介してタイルを読み込む際のパフォーマンスを維持します。
3. 非常に複雑な対象物のジオメトリを簡素化または集約します。ソースファイルのサイズを小さくして地図のパフォーマンスを向上させるために、複雑なポリゴンジオメトリには ST_Simplify のような BigQuery 関数の使用を検討してください。
タイリング
1. Google Maps Datasets API は、Maps JS API で使用するためにソースデータファイルから地図タイルを作成します。
2. マップタイルはズームベースのインデックス登録システムであり、ビジュアルアプリにデータをより効率的に読み込むことができます。
3. 低いズームレベルでは、密集した対象物や複雑な対象物がドロップされることがあります。都道府県や国（例: z5 ～ z12）にズームアウトすると、都市や近隣地域（例: z13 ～ z18）にズームアウトしたときとは異なる表示になることがあります。

例 - ロンドンの鉄道

この例では、リファレンスアーキテクチャを適用して、GCP と Google マップを使用して、Open Street Map（OSM）データからロンドンのすべての鉄道を可視化するウェブアプリケーションを作成します。

前提条件

BigQuery サンドボックスと Cloud コンソールへのアクセス
GCP プロジェクトと請求先アカウントが設定されていることを確認します。

ステップ 1 - BigQuery でデータにクエリを実行する

BigQuery 一般公開データセットに移動します。データセット「bigquery-public-data」とテーブル geo_openstreetmap.planet_features には、考えられるすべての対象物を含む地球全体の Open Street Map（OSM）データが含まれています。OSM Wiki で、amenity、road、landuse など、クエリに使用できるすべての機能を確認してください。

Cloud Shell または BigQuery Cloud コンソール（https://console.cloud.google.com）を使用し、SQL を使用してテーブルにクエリを実行します。以下のコードでは、bq query コマンドを使用し、境界ボックスと ST_Intersects() 関数を使用して、ロンドンのみに絞り込まれたすべての鉄道をクエリしています。

Cloud Shell からこのクエリを実行するには、次のコードスニペットを実行し、環境のプロジェクト ID、データセット、テーブル名を更新します。

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

次のクエリが返されます。

各特徴の一意の識別子 osm_id
feature_type（ポイント、ラインなど）
特徴の name（例: Paddington Station）
railway タイプ（main、観光、軍事など）
対象物の wkt（WKT 形式のポイント、ライン、またはポリゴンジオメトリ）。WKT は、BigQuery Geography の列がクエリで返す標準のデータ形式です。

注 - データセットを作成する前にクエリ結果を視覚的に検証するには、Looker Studio を使用して BigQuery からダッシュボードでデータをすばやく可視化します。

テーブルを Google Cloud Storage バケット内の CSV ファイルにエクスポートするには、Cloud Shell で bq extract コマンドを使用します。

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

注: Cloud Scheduler を使用して各ステップを自動化し、データを定期的に更新できます。

ステップ 2 - CSV ファイルからデータセットを作成する

次に、Google Cloud Storage（GCS）のクエリ出力から、Google Maps Platform データセットを作成します。Datasets API を使用すると、データセットを作成し、GCS でホストされているファイルからデータセットにデータをアップロードできます。

ご利用にあたっては、GCP プロジェクトで Maps Datasets API を有効化し、API ドキュメントをご確認ください。アプリのバックエンドのロジックから Datasets API を呼び出すための Python と Node.js のクライアントライブラリがあります。また、Cloud コンソールにデータセットを手動で作成するためのデータセット GUI もあります。

データセットのアップロードが完了したら、データセット GUI でデータセットをプレビューできます。

データセットのプレビュー

ステップ 4 - データセットをマップ ID に関連付ける

データセットを作成したら、地図のスタイルを関連付けてマップ ID を作成できます。地図のスタイルエディタで、mapId とスタイルをデータセットに関連付けることができます。ここでは、Cloud ベースのマップのスタイル設定を適用して地図の外観をカスタマイズすることもできます。

ステップ 5 - クライアントアプリの地図の可視化を作成する

最後に、Maps JS API を使用して、クライアントサイドのデータ可視化アプリにデータセットを追加します。前のステップでデータセットと関連付けられたマップ ID を使用して、マップオブジェクトを初期化します。次に、データセットレイヤのスタイルとインタラクティビティを設定します。詳しくは、データセットを使用したデータドリブンのスタイル設定に関するガイドをご覧ください。

Maps JS API を使用すると、スタイルをカスタマイズしたり、スタイルを動的に変更するイベントハンドラを追加したりできます。docsの例をご覧ください。以下では、setStyle 関数を定義して、feature_type 属性に基づいてこの例のポイントとラインの対象物スタイルを作成します。

注: Maps JS API の実装には、v=beta チャンネルを使用してください。

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

注 - データセットの帰属表示は必ず地図アプリに追加してください。OSM 帰属情報を追加するには、OSM ガイドラインを遵守したドキュメントのアトリビューションコードの例に沿って操作してください。

上記のコードは、単一ページのウェブアプリで初期化されると、次のような地図データになります。

ロンドンの鉄道の地図

ここから、対象物をフィルタするロジックの追加、ユーザーの操作に基づくスタイル設定の追加、アプリの他の部分との連携によって、setStyle() 関数で地図の可視化を拡張できます。

おわりに

この記事では、Google Cloud と Google Maps Platform を使用した大規模なデータ可視化アプリケーションのリファレンスアーキテクチャと実装例について説明しました。このリファレンスアーキテクチャを使用すると、Google Maps Datasets API を使用して、GCP BigQuery の任意のデータから、どのデバイスでもパフォーマンスの高い位置情報可視化アプリを作成できます。

次のアクション

その他の情報:

協力者

主任執筆者:

Google Maps Platform ソリューションエンジニアリングマネージャー Ryan Baumann