使用 BigQuery 進行資料視覺化

本文件提供參考架構和範例，說明如何使用 Google Cloud BigQuery 和 Google Maps Platform Datasets API 中的位置資料，建立地圖資料視覺化，例如分析開放的市政資料、建立電信涵蓋範圍地圖，或以視覺化方式呈現行動車隊的移動軌跡。

地圖資料視覺化是一項強大工具，可吸引使用者，並發掘位置資料中的空間洞察資訊。位置資料是具有點、線或多邊形特徵的資料。舉例來說，天氣地圖可協助消費者瞭解及規劃行程，並為暴風雨做好準備；商業智慧地圖可協助使用者從資料分析中發掘洞察資訊；電信地圖則可協助使用者瞭解供應商在特定服務區域的涵蓋範圍和品質。

不過，應用程式開發人員很難製作出效能良好、使用者體驗優異的大型地圖資料視覺化。大量資料必須載入用戶端記憶體，導致首次載入地圖的時間較長。視覺效果必須在所有裝置上都能正常運作，包括記憶體和 GPU 受到限制的低階手機。最後，開發人員需要選擇可攜、可靠且效能良好的大型資料算繪程式庫。

參考架構

開發具有大型資料視覺化功能的應用程式，需要兩個主要元件。

1. 客戶後端：所有後端應用程式資料和服務，例如處理和儲存。
2. 客戶用戶端：應用程式使用者介面，內含地圖圖表元件。

下方系統圖表說明這兩個元件如何與應用程式使用者、Google Cloud 和 Google Maps Platform 互動，建立大型資料視覺化應用程式。

立即試用：前往 Google Cloud 控制台，啟用 Maps Datasets API。

設計須知

使用 Google Cloud 和 Google Maps Platform 建立高效能資料視覺化時，請考量多項設計。

1. 來源資料大小和更新頻率。
   1. 如果 GeoJSON 格式的來源資料小於 5 MB，或更新頻率極高 (例如即時天氣雷達預報)，建議您在應用程式中，以用戶端 GeoJSON 物件的形式提供資料，並使用 deck.gl 圖層算繪。
   2. 如果資料大小超過 5 MB，且更新頻率不超過每小時一次，請考慮採用本文中的 Datasets API 架構。
      1. 資料集支援大小不超過 350 MB的檔案。
      2. 如果資料超過 350 MB，建議先刪減或簡化來源檔案中的幾何圖形資料，再傳送至資料集 (請參閱下方的「資料刪減」)。
2. 結構定義和格式
   1. 請確認資料中每個地圖項目都有全域專屬 ID 屬性。您可以使用專屬 ID 選取特定地圖項目並設定樣式，或將資料彙整至地圖項目，以便進行視覺化呈現，例如為「點擊」使用者事件中選取的地圖項目設定樣式。
   2. 根據 Datasets API 規格，將資料格式設為 CSV 或 GeoJSON，並提供有效的資料欄名稱、資料類型和 GeoJSON 物件類型。
   3. 如要輕鬆從 BigQuery 建立資料集，請在 SQL CSV 匯出作業中建立名為 wkt 的資料欄。Datasets 支援從 CSV 匯入幾何圖形，格式為已知文字 (WKT)，來源為名為 wkt 的資料欄。
   4. 請確認資料的幾何圖形和資料類型有效。舉例來說，GeoJSON 必須採用 WGS84 座標系統、幾何圖形繞行順序等。
   5. 請使用 geojson-validate 等工具，確保來源檔案中的所有幾何圖形都有效，或使用 ogr2ogr 轉換來源檔案的格式或座標系統。
3. 資料刪減
   1. 盡量減少地圖項目的屬性數量。您可以在執行階段，將其他屬性加入地圖項目，並使用專屬 ID 鍵 (範例)。
   2. 盡可能為屬性物件使用整數資料類型，盡量減少圖塊儲存空間，讓圖塊在用戶端應用程式中透過 HTTPS 載入時保持高效能。
   3. 簡化及/或匯總非常複雜的特徵幾何圖形；建議對複雜的多邊形幾何圖形使用 ST_Simplify 等 BigQuery 函式，縮減來源檔案大小並提升地圖效能。
4. 並排
   1. Google 地圖 Datasets API 會根據來源資料檔案建立地圖圖塊，用於網頁或行動裝置的 Maps SDK。
   2. 地圖圖塊是以縮放為基礎的索引系統，可更有效率地將資料載入視覺化應用程式。
   3. 在較低的縮放等級，地圖圖塊可能會捨棄密集或複雜的地圖項目。使用者縮小到州/省或國家/地區 (例如 z5-z12) 時，地圖看起來可能與放大到城市或鄰近地區 (例如 z13-z18) 時不同。

範例：倫敦鐵路

在這個範例中，我們會套用參考架構，使用 Google Cloud 和 Google 地圖建立網頁應用程式，以視覺化方式呈現 Open Street Map (OSM) 資料中倫敦的所有鐵路。

必要條件

1. BigQuery 沙箱和 Cloud 控制台的存取權
2. 確認您已設定 Google Cloud 專案和帳單帳戶。

步驟 1：在 BigQuery 查詢資料

前往「BigQuery Public Datasets」(BigQuery 公開資料集)。資料集「bigquery-public-data」和資料表 geo_openstreetmap.planet_features 包含全球的 Open Street Map (OSM) 資料，包括所有可能的功能。在 OSM Wiki 中，探索所有可查詢的功能，包括 amenity、road 和 landuse。

使用 Cloud Shell 或 BigQuery Cloud 控制台，透過 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)]
    ))
   )'

查詢會傳回：

1. 每個特徵的專屬 ID osm_id
2. feature_type，例如點、線等
3. 地圖項目的 name，例如 Paddington Station
4. railway 類型，例如主要、旅遊、軍事等
5. 地圖項目的 wkt：WKT 格式的點、線或多邊形幾何圖形。WKT 是 BigQuery 地理位置資料欄在查詢中傳回的標準資料格式。

注意：如要在建立資料集前，以視覺化方式驗證查詢結果，可以使用 Looker Studio，在 BigQuery 資訊主頁中快速呈現資料。

在 Cloud Shell 中使用 bq extract 指令，將資料表匯出至 Google Cloud Storage bucket 中的 CSV 檔案：

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 地圖平台資料集。您可以使用 Datasets API 建立資料集，然後從託管於 GCS 的檔案將資料上傳至資料集。

如要開始使用，請在 Google Cloud 專案中啟用 Maps Datasets API，並詳閱 API 文件。您可以使用 Python 和 Node.js 用戶端程式庫，從應用程式後端的邏輯呼叫 Datasets API。此外，您也可以使用資料集 GUI，在 Cloud 控制台中手動建立資料集。

資料集上傳完成後，您可以在資料集 GUI 中預覽資料集。

步驟 4：將資料集與地圖 ID 建立關聯

建立資料集後，您可以建立地圖 ID，並與地圖樣式建立關聯。在地圖樣式編輯器中，您可以將 mapId 和樣式與資料集建立關聯。您也可以在這裡套用雲端式地圖樣式設定，自訂地圖的外觀和風格。

步驟 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 Cloud BigQuery 中的任何資料建立位置資料視覺化應用程式，並透過 Google Maps Datasets API 在任何裝置上高效運作。

後續行動

延伸閱讀：

• Google Maps Platform Datasets API 說明文件
• 使用資料導向樣式即時查看資料
• BigQuery 地理空間分析簡介
• 在 BigQuery 中使用 GeoJSON 進行地理空間分析

貢獻者

主要作者：

• Ryan Baumann，Google Maps Platform 解決方案工程經理