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

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

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

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

以下列舉一些用途，說明如何在地圖上顯示資料導向樣式的動態資料更新：

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

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

解決方案的架構方法

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

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

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

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

步驟 1：選擇要視覺化及彙整至邊界地點 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 函式查詢這些資料。

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：使用資料導向樣式設定地圖樣式

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

在這個範例中，您將根據各郵遞區號的計程車數量設定地圖樣式，讓使用者瞭解所在地區的計程車密度和供應情形。樣式會因計程車數量值而異。計程車最少的區域會套用紫色樣式，色彩漸層會從紅色開始，經過橘色，最後以計程車密度最高的紐約市黃色結束。針對這個色彩配置，您將這些顏色值套用至 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 地圖平台解決方案工程師