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

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

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

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

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

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

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

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

以下のシステム図は、これら 2 つのコンポーネントがアプリユーザーである Google Cloud および Google Maps Platform とやり取りして、大規模なデータ可視化アプリを作成する方法を示すシステム図です。

アーキテクチャ図

設計上の考慮事項

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 を超える場合は、データセットに渡す前に、ソースファイル内のジオメトリデータをプルーニングまたは簡素化することを検討してください（後述の「データのプルーニング」を参照）。
スキーマと形式 <ph type="x-smartling-placeholder">
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 を使用してソースファイルの形式または座標系間でソースファイルを変換します。
データのプルーニング <ph type="x-smartling-placeholder">
1. 特徴のプロパティ数を最小限に抑える。実行時に、一意の ID キーに基づいて追加のプロパティを機能に結合できます（例）。
2. 可能であれば、プロパティオブジェクトで整数データ型を使用してタイルの保存容量を最小限に抑え、クライアントアプリでの HTTPS での読み込みのパフォーマンスを維持します。
3. 非常に複雑な対象物のジオメトリを簡素化または集約する。ソースファイルのサイズを小さくし、地図のパフォーマンスを向上させるために、複雑なポリゴンジオメトリで ST_Simplify のような BigQuery 関数を使用することを検討してください。
タイル張り <ph type="x-smartling-placeholder">
1. Google Maps Datasets API は、ウェブまたはモバイルの Maps SDK で使用する地図タイルをソースデータファイルから作成します。
2. Map Tiles はズームベースのインデックスシステムであり、ビジュアルアプリにデータをより効率的に読み込むことができます。
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）データが含まれています。amenity、road、landuse など、クエリで使用可能なすべての機能については、OSM Wiki をご覧ください。

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 型。例:メイン、観光、軍事など
対象物の 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 を使用して、クライアントサイドのデータ可視化アプリにデータセットを追加します。前の手順のデータセットに関連付けられた mapID を使用して、地図オブジェクトを初期化します。次に、データセットレイヤのスタイルとインタラクティビティを設定します。詳しくは、データセットを使用したデータドリブンのスタイル設定に関するガイドをご覧ください。

Maps JS API を使用すると、スタイルのカスタマイズや、スタイルを動的に変更するためのイベントハンドラの追加などを行えます。ドキュメントの例をご覧ください。以下で、setStyle 関数を定義して、[feature_type] 属性に基づいてこの例の点と線の対象物スタイルを作成します。

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