本頁面由 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 Maps Datasets 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 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)]
    ))
   )'

查詢會傳回：

每個地圖項目的專屬 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，將資料集新增至用戶端的資料視覺化應用程式。使用與前一個步驟中資料集相關聯的 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 地圖平台的大型資料視覺化應用程式的參考架構和實作範例。您可以運用這個參考架構，根據 GCP BigQuery 中的任何資料，建立位置資料視覺化應用程式，並透過 Google 地圖資料集 API 在任何裝置上執行。

後續行動

貢獻者

主要作者：

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