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

本文档介绍了如何使用 Maps JavaScript API 实现 Google 边界的动态数据驱动型样式，该 API 对各行各业和细分领域的各种用例都非常有用。

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

数据驱动型样式是 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 步：连接到实时数据

您可以通过多种方式连接到数据源，最佳的实现方式取决于您的具体需求和技术基础架构。在本例中，假设您的数据位于包含“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'];
   });
}

接下来，您需要确保数据保持最新状态。一种方法是使用网页工作器调用上述查询，然后使用 setInterval 函数设置计时器以刷新数据。您可以将时间间隔设置为适当的值，例如每 15 秒刷新一次地图。每当间隔时间经过时，Web Worker 都将为每个 postalCode 请求更新后的 taxiCount 值。

现在，我们可以查询和刷新数据了，接下来我们需要确保地图多边形的外观会反映这些更改。

第 3 步：使用数据驱动型样式设置地图样式

现在，您已经有了以 JSON 对象的形式在 Maps JavaScript 实例中创建可视化样式并将其应用到邮政编码边界所需的动态数据值，是时候为其指定分级统计图的样式了。

在此示例中，您将根据每个邮政编码对应的出租车数量设置地图样式，让用户了解他们所在区域的出租车密度和供应情况。样式因出租车数量值而异。出租车最少的区域将采用紫色样式，颜色渐变将穿过红色、橙色，以纽约市出租车黄色结束，表示密度最高的区域。对于此配色方案，您要将这些颜色值应用于 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 解决方案工程师