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

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

現在，您已擁有所需的動態資料值，能以 JSON 物件的形式為 Maps JavaScript 執行個體中的郵遞區號界線建立並套用視覺樣式，接下來就是將樣式設為 choropleth 地圖。

在這個範例中，您將根據每個郵遞區號的計程車數量設定地圖樣式，讓使用者瞭解所處區域的計程車密度和空房情況。樣式會因計程車計數值而異。計程車最少的區域將套用紫色樣式，而顏色漸層會穿過紅色、橘色，並以黃色延伸到紐約市計程車底部，以達到最高密度的區域。就這個色彩配置而言，您可以將這些色彩值套用至 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 地圖平台解決方案工程師