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

本文档介绍了使用 Maps JavaScript API 为 Google 边界实现动态数据驱动型样式的原因和方法，可用于不同行业和细分的各种使用场景。

<ph type="x-smartling-placeholder">

</ph>

纽约市出租车数量（按邮政编码）
纽约市按邮政编码边界计算的出租车数量动画（模拟，延时）：

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

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

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

• 拼车：实时更新可用于识别需求高峰期，在这种情况下，一些提供商可能会设置高峰价格。
• 交通：实时更新可用于识别交通拥堵区域，这将有助于确定最佳备选路线。
• 选举：在选举之夜，系统可以使用实时数据投票数据，实时显示选举结果。
• 员工安全：实时更新可用于跟踪实时发生的事件，识别高风险区域，并为现场响应人员提供态势感知。
• 天气：实时更新可用于跟踪风暴的动态，识别当前危险，并提供警告和警报。
• 环境：实时更新可用于跟踪火山灰和其他污染物的流动情况，确定环境恶化的区域，并监控人类活动的影响。

在所有这些情况下，客户都可以将其实时数据 Feed 与 Google 边界相结合，从而快速轻松地在地图上直观呈现他们的数据，从而发掘更多价值，从而获得近乎即时的数据洞见超能力，从而做出更明智的决策。

<ph type="x-smartling-placeholder">

</ph> 立即试用：访问 Google Cloud 控制台并启用 Maps JavaScript API。

解决方案的架构方法

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

<ph type="x-smartling-placeholder">

</ph>

架构
以下是此方法的应用架构图：

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

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

借助此解决方案，您可以按邮政编码直观呈现纽约市附近出租车实时密度的假设数据集。虽然这可能不是真实的数据，但可用于实际应用，让您了解动态数据如何通过数据驱动型样式在地图上直观呈现功能。

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

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