使用 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. 如果您的資料大小超過 5MB，且每小時更新速度不到一次，請考慮使用本文件中的 Datasets API 架構。
      1. 資料集支援的檔案大小上限為 350 MB。
      2. 如果資料超過 350 MB，建議您先修剪或簡化來源檔案中的幾何圖形資料，再傳送至資料集 (請參閱下方的「資料修剪」)。
2. 結構定義與格式
   1. 確保資料具備每項功能的全域專屬 ID 屬性。您可使用專屬 ID 選取特定地圖項目及設定樣式，或是將資料與地圖項目結合，藉此呈現視覺化效果，例如在「點擊」使用者事件上設定所選地圖項目的樣式。
   2. 請根據 Datasets API 規格，將資料的格式設為 CSV 或 GeoJSON，當中包含有效的資料欄名稱、資料類型和 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 沙箱和 Cloud 控制台
2. 確認您已設定 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)]
    ))
   )' 

查詢會傳回：

1. 每項功能 osm_id 的專屬 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」屬性在本範例中建立點和線條地圖項目樣式。

注意：請務必使用 v=beta 版導入 Maps JS API。

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 Maps Datasets API，從任何裝置上執行的資料視覺化應用程式。

下一步

相關資源：

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

貢獻者

主體作者：

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