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

本文件提供參考架構和範例，說明如何在 Google Cloud Platform BigQuery 和 Google 地圖平台 Datasets API 中使用位置資料建立地圖資料圖表，例如分析開放市政資料、製作電信覆蓋範圍地圖，或以圖表呈現車隊移動的追蹤記錄。

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

然而，應用程式開發人員很難製作高成效、且能提供絕佳使用者體驗的大型地圖資料圖表。大型資料必須載入記憶體用戶端，導致首次地圖載入速度緩慢。影像在所有裝置 (包括記憶體和 GPU 有限的低階手機) 上都必須提供優異的視覺效果。最後，開發人員需選擇大型資料轉譯程式庫，該程式庫不但可轉移、穩定可靠，還能處理大量資料。

參考架構

開發具有大型資料圖表的應用程式需要兩個主要元件。

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

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

⭐ 注意：Maps Datasets API 是正式發布前的產品。詳情請參閱《服務條款》。

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

設計須知

使用 Google Cloud 和 Google 地圖平台建立高效的資料視覺化時，有許多設計考量。

1. 來源資料大小和更新頻率：
   1. 如果 Geojson 格式的來源資料小於 5mb，或是經常更新 (例如即時天氣雷達天氣預報)，請考慮在應用程式中以 Geojson 物件用戶端形式提供資料，並使用 deck.gl 圖層轉譯。
   2. 如果您的資料大小超過 5 MB，且每小時更新不到一次，請考慮使用本文件中的 Datasets API 架構。
      1. 資料集支援大小上限為 350 MB 的檔案。
      2. 如果資料超過 350 MB，在傳遞至資料集之前，請考慮縮減或簡化來源檔案中的幾何圖形資料 (請參閱下方「資料修剪」一節)。
2. 結構定義與格式
   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 轉換格式或座標系統之間的來源檔案。
3. 資料修剪
   1. 盡量減少地圖項目的屬性數量。您可以在執行階段利用專屬 ID 金鑰，將其他資源加入地圖項目中 (範例)。
   2. 請盡可能在屬性物件中使用整數資料類型，盡可能減少資訊方塊儲存空間空間，保持資訊方塊效能，以便在用戶端應用程式中透過 HTTPS 載入。
   3. 簡化及/或匯總非常複雜的特徵幾何圖形；請考慮在複雜的多邊形幾何圖形上使用 ST_Simplify 等 BigQuery 函式，以減少來源檔案大小並提升地圖效能。
4. 圖塊
   1. Google Maps Datasets API 會從來源資料檔案建立地圖圖塊，以便在 Maps JS API 中使用。
   2. 地圖圖塊是一種以縮放為基礎的索引系統，能夠更有效率地將資料載入視覺應用程式。
   3. 在較低的縮放等級下，地圖圖塊可能會放置複雜的或複雜的地圖項目。使用者縮小到某個州/省或國家/地區 (例如 z5-z12) 時，看起來可能會與放大城市或社區 (例如 z13-z18) 時看起來不同。

範例 - 倫敦的鐵路

在這個例子中，我們將運用參考架構建立網頁應用程式，透過 GCP 和 Google 地圖，以開放街景服務 (OSM) 資料視覺化呈現倫敦的所有鐵路。

先備知識

1. 可使用 BigQuery Sandbox 和 Cloud 控制台
2. 確認您已完成 GCP 專案和帳單帳戶設定。

步驟 1 - 在 BigQuery 中查詢資料

前往「BigQuery 公開資料集」。「bigquery-public-data」和「geo_openstreetmap.planet_features」資料集包含全球累積的公開街景服務 (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)]
    ))
   )' 

查詢會傳回：

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

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

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

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

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

步驟 5：建立用戶端應用程式地圖視覺化呈現

最後，您可以使用 Maps JS API，將資料集新增至用戶端的資料視覺化應用程式。使用與上一步資料集相關聯的 mapID 初始化地圖物件。接著設定資料集圖層的樣式和互動性。詳情請參閱完整的資料集資料導向樣式指南。

您可以使用 Maps JS API 自訂樣式，新增事件處理常式以動態變更樣式，還有其他更多功能。請參閱docs中的範例。下文會定義 setStyle 函式，根據「feature_type」屬性為此範例建立點和線的地圖項目樣式。

注意 - 如果是導入 Maps JS API，請務必使用 v=beta 版。

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

後續行動

相關資源：

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

協作者

主要作者：

• Google 地圖平台解決方案工程經理 Ryan Baumann