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

本文說明為何要使用 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 界線資料導向樣式，根據不同產業和區隔，使用資料為地圖設定樣式，實現各種不同的導入方式。連結即時資料後，您就能傳達發生的事件、發生的地點，以及發生的時間。這項功能可望發揮即時資料的價值，並協助使用者在現實生活中即時理解這些資料。

後續行動

貢獻者

主要作者：

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