本頁面由 Cloud Translation API 翻譯而成。

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

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

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

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

參考架構

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

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

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

架構圖

設計須知

如要使用 Google Cloud 和 Google 地圖平台建立高效能資料視覺化內容，請務必考量以下幾項設計考量。

來源資料大小和更新頻率。
1. 如果以 GeoJSON 格式提供的來源資料小於 5 MB，或經常更新 (例如即時天氣雷達預報)，建議您在應用程式中以 GeoJSON 物件用戶端端提供資料，並使用 deck.gl 圖層進行轉譯。
2. 如果資料大小超過 5 MB，且更新頻率不超過每小時一次，建議您考慮使用本文所述的 Datasets API 架構。
  1. 資料集支援大小上限為 350 MB 的檔案。
  2. 如果資料大小超過 350 MB，請考慮在將資料傳送至資料集之前，先在來源檔案中裁減或簡化幾何資料 (請參閱下方的資料裁減)。
結構與格式
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 在格式或座標系統之間轉換來源檔案。
資料裁剪
1. 盡量減少地圖項目的屬性數量。您可以在執行階段透過不重複 ID 鍵 (範例) 將其他資源彙整至功能。
2. 盡可能使用整數資料類型做為屬性物件，盡量減少資訊方塊儲存空間，確保資訊方塊在用戶端應用程式中透過 HTTPS 載入時能維持效能。
3. 簡化和/或匯總非常複雜的地圖形狀；建議您在複雜的多邊形地圖形狀上使用 ST_Simplify 等 BigQuery 函式，以縮減來源檔案大小並提升地圖效能。
平鋪
1. Google 地圖資料集 API 會從來源資料檔案建立地圖圖塊，以便與網頁版或行動版 Maps SDK 搭配使用。
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 查詢指令，透過邊界框和 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)]
    ))
   )'

查詢會傳回：

每個地圖項目的專屬 ID osm_id
feature_type，例如點、線等
地圖項目的 name，例如 Paddington Station
railway 類型，例如主要、旅遊、軍事等
以 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 地圖平台資料集。您可以使用 Datasets API 建立資料集，然後從 GCS 代管的檔案將資料上傳至資料集。

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

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

資料集預覽

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

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

步驟 5：建立用戶端應用程式地圖圖表

最後，您可以使用 Maps JS API，將資料集加入用戶端資料視覺化應用程式。使用與前一個步驟中資料集相關聯的地圖 ID 初始化地圖物件。接著，設定資料集圖層的樣式和互動功能。詳情請參閱資料集資料導向樣式指南。

您可以使用 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 地圖平台建立大型資料視覺化應用程式的實作範例。您可以運用這個參考架構，根據 GCP BigQuery 中的任何資料，建立位置資料視覺化應用程式，並透過 Google 地圖資料集 API 在任何裝置上執行。

後續行動

貢獻者

主要作者：

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