使用数据驱动型样式实时查看数据

本文档介绍了使用 Maps JavaScript API 实现 Google 边界的动态数据驱动型样式的原因和方法，这对于各个行业和细分市场中的各种用例都非常有用。

纽约市出租车数量（按邮政编码划分）（延时） — **纽约市各邮政编码区域的出租车数量**
纽约市各邮政编码区域的出租车数量动画（模拟、延时）：

地图图例 — **纽约市各邮政编码区域的出租车数量**
纽约市各邮政编码区域的出租车数量动画（模拟、延时）：

数据驱动型样式是 Google Maps Platform 的一项功能，可让您利用 Google 的行政边界多边形，为这些多边形应用样式以在地图上显示，并结合自己的数据来创建内容丰富的自定义地图，这些地图可用于直观分析和更好地了解您的数据。本文档将讨论一些用例，这些用例说明了为什么以及如何通过集成动态数据 Feed，在地图上以近乎实时的方式利用数据驱动型样式直观呈现数据。

借助数据驱动型样式，您可以创建显示数据地理分布的地图，动态自定义多边形样式，并通过点击事件与数据互动。这些功能可用于为各种用例和行业创建信息丰富且引人入胜的地图。

以下是一些可能适用于在数据驱动型样式地图上显示动态数据更新的用例示例：

网约车：实时更新可用于识别需求量高的区域，在这种情况下，一些提供方可能会采用高峰时段定价。
交通运输：实时更新可用于识别拥堵区域，这将有助于确定最佳替代路线。
选举：在选举之夜，实时数据轮询数据可用于直观呈现结果。
工人安全：实时更新可用于实时跟踪事件的进展情况，识别高风险区域，并为现场响应人员提供情境感知。
天气：实时更新可用于跟踪风暴的移动，识别当前危险，并提供警告和提醒。
环境：实时更新可用于跟踪火山灰和其他污染物的移动，识别环境退化区域，并监控人类活动的影响。

在所有这些情况下，客户都可以通过将实时数据 Feed 与 Google 的边界相结合，在地图上快速轻松地直观呈现数据，从而获得额外的价值，让他们拥有近乎即时的分析洞见，以便做出更明智的决策。

解决方案的架构方法

现在，让我们逐步了解如何使用数据驱动型样式构建地图以直观呈现动态数据。如前所述，该用例是按邮政编码直观呈现纽约市出租车数量。这有助于用户了解打车有多容易。

动态数据驱动型样式解决方案

现在，让我们逐步了解为数据集实现动态数据驱动型样式分级统计图所需的步骤。

借助此解决方案，您可以直观呈现纽约市周围按邮政编码划分的实时出租车密度假设数据集。虽然这可能不是真实世界的数据，但它具有真实世界的应用，并让您了解如何使用数据驱动型样式在地图上直观呈现动态数据的功能和能力。

第 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 Functions 函数查询该表。

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'];
   });
}

接下来，您需要确保数据保持最新状态。一种方法是使用 Web Worker 调用上述查询，并设置一个计时器以使用 setInterval 函数刷新数据。您可以将间隔设置为适当的值，例如每 15 秒刷新一次地图。每次间隔时间过去后，Web Worker 都会请求每个邮政编码的更新 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 Maps Platform 解决方案工程师