使用 BigQuery 和 Datasets API 以視覺化方式呈現資料

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

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

不過，應用程式開發人員很難製作出效能出色且提供優異使用者體驗的大規模地圖資料視覺化效果。大型資料必須載入至用戶端記憶體，導致第一次載入地圖的時間變慢。視覺效果必須能在所有裝置上順暢運作，包括記憶體和 GPU 受限的低階手機。最後，開發人員需要選擇大型資料算繪程式庫，該程式庫必須可攜、可靠，且在處理大量資料時能提供良好效能。

參考架構

開發含有大量資料視覺效果的應用程式，需要兩個主要元件。

1. 客戶後端：所有後端應用程式資料和服務，例如處理和儲存服務。
2. 客戶端：您的應用程式使用者介面，其中包含地圖視覺化元件。

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

設計須知

您必須考量許多設計因素，才能使用 Google Cloud 和 Google 地圖平台建立高效能資料視覺化內容。

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 的資料欄。資料集支援從 CSV 匯入幾何圖形，格式為 Well-Known Text (WKT)，並從名為 wkt 的資料欄匯入。
   4. 請確認資料是有效的幾何圖形和資料類型。例如，GeoJSON 必須採用 WGS84 座標系統、幾何圖形迴轉順序等。
   5. 使用 geojson-validate 等工具，確保來源檔案中的所有幾何圖形皆有效，或是使用 ogr2ogr 在格式或座標系統之間轉換來源檔案。
3. 資料裁剪
   1. 盡量減少地圖項目的屬性數量。您可以在執行階段透過不重複 ID 鍵 (範例) 將其他屬性彙整至功能。
   2. 盡可能使用整數資料類型做為屬性物件，以盡量減少資訊方塊儲存空間，並確保資訊方塊在用戶端應用程式中透過 HTTPS 載入時能維持效能。
   3. 簡化和/或匯總非常複雜的地圖形狀；建議您在複雜的多邊形地圖形狀上使用 ST_Simplify 等 BigQuery 函式，以縮減來源檔案大小並提升地圖效能。
4. 平鋪
   1. Google 地圖資料集 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 公開資料集。資料集「bigquery-public-data」和資料表 geo_openstreetmap.planet_features 包含全球範圍的 Open Street Map (OSM) 資料，包括所有可能的功能。在 OSM Wiki 中查看所有可用查詢功能，包括 amenity、road 和 landuse。

使用 Cloud Shell 或 BigQuery Cloud 控制台，透過 SQL 查詢資料表。以下程式碼片段使用 bq 查詢指令，透過邊界框和 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 的資訊主頁中快速呈現資料。

如要將資料表匯出至 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 託管的檔案將資料上傳至資料集。

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

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

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

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

步驟 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,
           }
     }
}

當上述程式碼在單頁面網頁應用程式中完成初始化時，會產生下列地圖資料視覺效果：

從這裡開始，您可以透過在 setStyle() 函式中新增邏輯來篩選地圖功能、根據使用者互動新增樣式，以及與應用程式的其他部分互動，擴充地圖視覺化效果。

結論

在本文件中，我們討論了參考架構，以及使用 Google Cloud 和 Google 地圖平台建立大型資料視覺化應用程式的實作範例。您可以運用這項參考架構，根據 Google Cloud BigQuery 中任何資料，建立位置資料視覺化應用程式，這些資料可在任何裝置上使用 Google 地圖資料集 API 執行。

後續行動

延伸閱讀：

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

貢獻者

主要作者：

• Google 地圖平台解決方案工程團隊主管 Ryan Baumann