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

本文件說明使用 Maps JavaScript API 導入 Google 界線動態資料導向樣式的原因和方式；此 API 適合各種產業和區隔的用途。

在紐約市的計程車計數 (按郵遞區號劃分)
紐約市根據郵遞區號邊界劃分的計程車計數 (模擬、經過時效)：
紐約市的計程車計數 (按郵遞區號) 地圖圖例

資料導向樣式是 Google 地圖平台功能，可讓您使用 Google 的管理界線多邊形、將樣式套用至這些多邊形以在地圖上顯示，以及結合自己的資料製作內容豐富的自訂地圖，用於視覺化分析及提高資料解讀能力。本文件討論幾個應用實例，說明您為何要整合動態資料動態饋給，以近乎即時的方式在地圖上使用資料導向樣式，以視覺化方式呈現資料。

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

以下列舉幾種使用資料導向樣式動態資料更新的地圖，可能適用的情況：

  • 共享單車：即時更新可用來找出需求量較高的地區，在這種情況下，部分供應商可能會提高房價。
  • 交通：即時更新資訊可用於識別壅塞的區域，協助判斷最佳替代路線。
  • 選舉：在選舉之夜，系統會利用即時資料輪詢資料，以視覺化方式呈現選舉結果。
  • 工作人員安全：即時更新可用來即時追蹤活動展開時的事件、找出高風險區域，並向現場應變人員提供情勢感知。
  • 天氣：即時更新資訊可用來追蹤風暴的移動情形、找出目前危害，以及提供警示和快訊。
  • 環境：你可以透過即時更新追蹤火山灰塵和其他汙染物的移動情形、找出環境降低的區域，並監控人體活動的影響。

在這些情況下，客戶可以結合即時資料動態饋給與 Google 邊界來創造額外價值，並在地圖上輕鬆快速地以視覺化方式呈現資料，讓消費者取得近乎即時的深入分析，進而做出更明智的決策。

解決方案的架構規劃

現在就來瞭解如何使用資料導向樣式建立地圖，以視覺化方式呈現動態資料。如前文所述，用途是以郵遞區號視覺化的紐約市計程車數量。協助使用者瞭解叫計程車有多麼容易。

架構
以下是採用此方法的應用程式架構圖表：
應用程式架構

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

接下來將逐步說明為資料集實作動態資料導向樣式 choropleth 地圖的必要步驟。

這項解決方案可讓您依據郵遞區號，以視覺化方式呈現紐約市各地的即時計程車密度。雖然這不一定是實際資料，但它具備實際用途，可讓您瞭解使用資料導向樣式，在地圖上以視覺化方式呈現動態資料的強大功能和功能。

步驟 1：選擇要以視覺化方式呈現的資料，並與界線地點 ID 彙整

第一步是識別你要顯示的資料，並確保資料可與 Google 的邊界進行比對。您可以針對各個郵遞區號呼叫 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 秒重新整理一次地圖。每次間隔時間經過時，網路工作站就會要求每個郵遞區號的計程車值更新。

現在，我們已可查詢並重新整理資料，接下來可以確保地圖多邊形的外觀能反映這些變更。

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

現在，您已擁有所需的動態資料值，能為 Maps JavaScript 例項中的郵遞區號邊界建立並套用視覺樣式，做為 JSON 物件。接下來，我們要以 choropleth 地圖做為樣式。

在本例中，您將根據每個郵遞區號的計程車數量設定地圖的樣式，讓使用者瞭解所處地區的計程車密度和供應情形。樣式會因計程車計數值而異。計程車最少的區域將套用紫色樣式，而顏色漸層會在紐約市計程車的紅、橘，結束於紐約市計程車，直到最高密度區域。針對這個色彩配置，您要將這些色彩值套用至 fillColor 和 strokeColor。將 fillOpacity 設定為 0.5 ，即可讓使用者查看基本地圖，並將筆觸透明度設為 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 地圖平台解決方案工程師