使用資料導向樣式即時查看資料

本文說明為何要使用 Maps JavaScript API 實作 Google 邊界動態資料導向樣式，以及如何實作，這對各行各業和各個區隔的各種用途都很實用。

資料導向樣式是 Google 地圖平台的功能，可讓您使用 Google 的行政界線多邊形、為這些多邊形套用樣式，並在地圖上顯示這些多邊形，以及結合自己的資料，製作內容豐富的自訂地圖，用於視覺分析並進一步瞭解您的資料。本文件將討論一些用途，說明為何要整合動態資料動態饋給，以及如何透過資料導向樣式，在地圖上以近乎即時的方式呈現資料。

您可以透過資料導向樣式，建立顯示資料地理分布的地圖、動態自訂多邊形樣式，以及透過點擊事件與資料互動。這些功能可用於建立多種用途和產業的資訊豐富且引人入勝的地圖。

以下是一些適用於在資料導向樣式中顯示動態資料更新的地圖用途範例：

• 共乘服務：即時更新功能可用於找出需求量高的地區，在這種情況下，部分供應商可能會實施尖峰價格。
• 交通：即時更新功能可用於找出壅塞區域，協助您決定最佳替代路線。
• 選舉：在選舉當晚，您可以使用即時民調資料，即時呈現結果。
• 工人安全：即時更新功能可用於即時追蹤事件、找出高風險區域，並提供現場人員相關情況。
• 天氣：即時更新功能可用於追蹤暴風移動情形、識別目前的危險，並提供警告和警報。
• 環境：即時更新功能可用於追蹤火山灰和其他污染物的移動情形、找出環境惡化的區域，以及監控人類活動的影響。

在所有這些情況下，客戶只要將自己的即時資料動態饋給與 Google 的邊界結合，就能快速輕鬆地在地圖上呈現資料，發掘更多價值，並藉由即時洞察資料做出更明智的決策。

解決方案的架構方法

接下來，我們將逐步說明如何使用資料導向樣式建立地圖，以便將動態資料視覺化。如前文所述，這個用途是根據郵遞區號呈現紐約市的計程車數量。這有助於使用者瞭解叫車的難易程度。

動態資料導向樣式設定解決方案

接下來，我們將逐步說明如何為資料集導入動態資料導向樣式的choropleth 地圖。

這個解決方案可讓您根據郵遞區編號，以視覺化方式呈現紐約市周邊即時計程車密度的假設資料集。雖然這不是實際資料，但有實際應用情境，可讓您瞭解如何透過資料導向樣式，在地圖上呈現動態資料的強大功能。

步驟 1：選擇要視覺化及彙整至邊界 Place ID 的資料

第一步是找出要顯示的資料，並確保資料可與 Google 的邊界相符。您可以為每個 postalCode 呼叫 findPlaceFromQuery 回呼方法，執行此用戶端比對作業。請注意，美國的郵遞區號有不同的名稱，但其他行政區則沒有。在可能出現模糊結果的情況下，請務必為查詢選取正確的地點 ID。

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

如果資料含有經緯度值，您也可以使用 Geocoding API 搭配元件篩選功能，將這些經緯度值解析為地點 ID 值，以便為您想套用樣式的地圖圖層解析這些值。在這個範例中，您將為 POSTAL_CODE 地圖項目圖層設定樣式。

步驟 2：連結即時資料

連線至資料來源的方式有很多種，最佳實作方式取決於您的具體需求和技術基礎架構。在本例中，假設您的資料位於 BigQuery 資料表中，且該資料表有兩個資料欄：「zip_code」和「taxi_count」，您會透過 Firebase Cloud Function 查詢資料。

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

接下來，您需要確保資料保持最新狀態。其中一種方法是使用網路工作者呼叫上述查詢，並使用 setInterval 函式設定計時器，以便重新整理資料。您可以將間隔時間設為適當值，例如每 15 秒重新整理地圖。每次間隔時間過後，網路工作者就會依據 postalCode 要求更新 taxiCount 值。

我們現在可以查詢及重新整理資料，讓地圖多邊形的顯示方式反映這些變更。

步驟 3：使用資料導向樣式為地圖設定樣式

您現在已取得建立所需的動態資料值，並將郵遞區號邊界以 JSON 物件的形式，在 Maps JavaScript 例項中建立並套用視覺樣式，現在是時候將郵遞區號邊界設為等高線地圖的樣式。

在這個範例中，您將根據各個郵遞區的計程車數量設定地圖樣式，讓使用者瞭解所在地區的計程車密度和供應情形。樣式會因計程車數量值而異。計程車最少的地區會套用紫色樣式，色彩漸層會從紅色開始，經過橘色，最後以計程車密度最高的紐約市黃色結束。針對此色彩配置，您將這些顏色值套用至 fillColor 和 strokeColor。將 fillOpacity 設為 0.5 可讓使用者查看底層地圖，將 strokeOpacity 設為 1.0 則可讓使用者區分同色多邊形的邊界：

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

結論

您可以使用資料為 Google 邊界設定樣式，藉此根據不同產業和區隔，使用資料為地圖設定樣式。連結即時資料後，您就能傳達發生的事件、發生的地點，以及發生的時間。這項功能有助於發揮即時資料的價值，並協助使用者在實際情況中即時瞭解資料。

後續行動

• 觀看「如何使用資料導向樣式為 Google 地圖邊界設定樣式」網路研討會。
• 您可以使用點擊事件，進一步運用資料導向樣式來製作可視化資料。
• 建議您在地圖中加入進階標記。

貢獻者

主要作者：

Jim Leflar | Google 地圖平台解決方案工程師