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

本文档介绍了为何以及如何使用 Maps JavaScript API 实现 Google 边界的动态数据驱动型样式，这对各行各业和细分领域的各种应用场景都很有用。

按邮政编码统计的纽约出租车数量
按邮政编码边界显示的纽约出租车数量动画（模拟、延时）：
纽约市出租车数量按邮政编码（延时摄影） 地图图例

数据驱动型样式是 Google Maps Platform 的一项功能，可让您使用 Google 的行政边界多边形，为这些多边形应用样式以在地图上显示，并结合您自己的数据制作内容丰富的自定义地图，以便进行直观分析并更好地了解数据。本文档将介绍一些使用场景，说明为什么以及如何通过集成动态数据 Feed 来使用数据驱动型样式在地图上近乎实时地可视化数据。

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

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

  • 拼车：实时更新可用于确定需求旺盛的区域，在这种情况下，部分提供商可能会采用 Surge 价格。
  • 交通：实时更新可用于确定拥堵区域，这有助于确定最佳替代路线。
  • 选举：在大选之夜，您可以使用实时数据投票数据来直观呈现最新结果。
  • 工人安全：实时更新可用于实时跟踪事件、确定高风险区域，并为现场响应人员提供态势感知。
  • 天气：实时动态可用于跟踪风暴的移动情况、识别当前的危险情况，以及提供警告和提醒。
  • 环境：实时更新可用于跟踪火山灰和其他污染物的移动情况、确定环境恶化区域，以及监控人类活动的影响。

在所有这些情况下，客户都可以将其实时数据 Feed 与 Google 的地理边界相结合，快速轻松地在地图上直观呈现数据，从而获得近乎即时的分析洞见，为做出更明智的决策提供依据，从而实现更高价值。

解决方案的架构方法

现在，我们将逐步介绍如何使用数据驱动型样式构建地图来直观呈现动态数据。如前所述，此用例是按邮政编码直观显示纽约市出租车数量。这有助于用户了解叫出出租车的难易程度。

架构
下面是该方法的应用架构图：
应用架构

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

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

借助此解决方案，您可以按邮政编码直观呈现纽约市周围实时出租车密度的数据集。虽然这可能不是真实数据，但具有实际应用场景，可让您了解如何利用数据驱动型样式在地图上可视化动态数据的强大功能。

第 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 步：连接到实时数据

您可以通过多种方式连接到数据源，具体实现方式取决于您的具体需求和技术基础架构。在本例中，假设您的数据位于一个包含两个列（“zip_code”和“taxi_count”）的 BigQuery 表中，并且您将通过 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 边界的数据驱动型样式，您可以使用自己的数据为地图设置样式，以便在各个行业和细分领域中实现各种应用。通过连接到实时数据，您可以传达发生了什么、发生在哪里以及发生的时间。此功能有望发掘实时数据的价值，并帮助用户更好地了解真实世界中的实时数据。

后续操作

贡献者

主要作者：

Jim Leflar | Google Maps Platform 解决方案工程师