区域和路线的空气质量和花粉指数

目标

Air Quality API 和 Pollen API 提供了绝佳的机会，可在任何给定地点为行程或地图添加更多 数据洞见。您可以通过两种方式使用这些 API 提供的数据：将索引作为文本使用，或将热图图块作为光栅图像使用。

使用热图图块 API 端点时，您在加载单个栅格图块时可能会遇到一些问题，例如：

• 如何在网页上的 Google 地图上加载图块？（同时也是为了遵守 API 使用条款）
• 如何管理体验期间的请求数量？
• 如何读取功能块值？

示例应用场景

您将看到一些示例用例，尝试回答上述问题。

• 某个区域的空气质量和花粉量：在一个或多个自定义多边形内可视化热图图块（当前状况）栅格数据。
• 沿路线的空气质量和花粉量：直观呈现绘制在路线航点上的热图图块（当前状况）栅格数据。

实现

您将了解可用的功能块以及如何在 Web 体验中加载这些功能块。您还将了解在将图块加载到地图上的情况下，可以执行哪些操作来管理请求数量。最后，您将了解如何读取功能块。

按类型显示的热图功能块

Air Quality API

- UAQI_RED_GREEN（UAQI，红绿调色板）：通用空气质量指数红绿调色板。
- UAQI_INDIGO_PERSIAN（UAQI，靛蓝波斯坦调色板）：通用空气质量指数靛蓝波斯坦调色板。
- PM25_INDIGO_PERSIAN：PM2.5 指数靛蓝波斯坦调色板。
- GBR_DEFRA：每日空气质量指数 (UK) 配色方案。
- DEU_UBA：德国本地空气质量指数配色方案。
- CAN_EC：加拿大空气质量健康指数配色方案。
- FRA_ATMO：法国空气质量指数配色板。
- US_AQI：美国空气质量指数调色板。

Pollen API

- TREE_UP：热图类型将表示树状索引图形地图。
- GRASS_UPI：热图类型将表示草地指数图形地图。
- WEED_UPI：热图类型将以图形方式表示杂草指数地图。

在 Web 中显示热图图块

加载图块并应用矢量遮罩，以便仅显示地图视口中的所需区域。

加载功能块

• 使用 Maps JavaScript API 加载 Google 地图底图并加载 deckgl 库，为加载光栅图块图片做准备。
• 使用 deck.gl TileLayer 加载空气质量 热图图块。这将在热图图块上显示 Google 地图基本地图标签（与 Maps JavaScript 自定义叠加层不同）

import { TileLayer } from "deck.gl";
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

// const TileLayer = deck.TileLayer;
// const GoogleMapsOverlay = deck.GoogleMapsOverlay;

// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4,
  });

  const apiKey = 'YOUR_API_KEY';
 const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type
  const deckOverlay = new GoogleMapsOverlay({
    layers: [
       // Heatmap Tiles layer
new TileLayer({
    id: 'heatmap-tiles',
    data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey,
...
 })
    ],
  });

  deckOverlay.setMap(map);
}

window.initMap = initMap;

应用矢量遮罩

您可以直观地隐藏或显示热图图块的任何部分。重要提示：您需要获取数据，以便创建要应用于热图图块的矢量遮罩。

• 在某个区域内：

使用 deck.gl GeoJson 在空气质量图块层上创建遮罩。

以下示例使用的是法国的多边形地理地理 JSON

// geojson sample

{  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]]
  },
  "properties": {
    "name": "France"
  }
}

下面是 deckgl 实现的参考：

  // Loaded layers in maps overlay
  const deckOverlay = new GoogleMapsOverlay({ layers: layers });
  const MaskExtension = deck.MaskExtension; // or import extension
  ...

  // As part of object containing the different layers
  const layers = [
    // Masking layer
  new GeoJsonLayer({
    id: 'country-vector',
    operation: 'mask',
    data: "geojson.json", // <-- any custom geometry
  })
  ...
  ...

  // Heatmap Tiles layer
  new TileLayer({
      id: 'heatmap-tiles',
      maskId: 'country-vector', // <-- same as mask id
    extensions: [new MaskExtension()],  // <-- enable mask extension
  ...
  })
  ]

• 沿路线：将 deck.gl 与其 TripsLayer 结合使用，在空气质量 TileLayer 上创建 遮罩

行程的空气质量热图功能块

管理 API 请求和费用

虽然浏览器的默认行为通常是将所有已加载的功能块缓存在本地存储空间（同一会话内），但您可以进一步优化：

• 限制加载区域：创建一个边界框 （红色），并将其分配给图层，在任何给定缩放级别下，系统只会加载覆盖边界框的热图图块（蓝色）

边界框（红色）、热图图块（蓝色）

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

• 将视觉显示图块大小设置为在任何给定缩放级别下覆盖整个视口；建议：介于 256 到 1024 之间。

  重要提示：API 图块的分辨率保持为 256x256，但您可以通过视觉显示调整来增加/减少图块请求的数量，以覆盖整个地图视口

  （确保它与 Google 地图的 minZoom 和 maxZoom 搭配使用，即 tilesize:1024 不会在缩放级别为 0 或 1 时加载图块）。

图块大小为 256x256 像素与 512x512 像素的视口

    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

提示：使用 refinementStrategy:'no-overlap' 替换“best-available”来优化图层功能块渲染设置，以避免功能块之间发生视觉冲突。

读取像素值

警告：您可以读取热图图块或从空气质量 API 或花粉 API 图块中包含的各个像素读取的任何值，并将其缓存 1 小时（而不是无限期）。请参阅“16 Air Quality API”部分中详述的 API 专用术语，以验证您的实现

如需在颜色比例尺上显示相应值，请执行以下操作

您可以在将 onClick 事件分配为 deck.gl 图层的属性后，使用 Luma.gl 库及其 readPixelsToArray 方法。

像素值：rgba(128,0,0,255)

低 高

  // Uint8Array pixel sample
  import { readPixelsToArray } from "@luma.gl/core";
  ...

  // assign on the TileLayer
  new TileLayer({
      id: 'heatmap-tiles',
  ...
    onClick: ({
    bitmap,
    layer
  }) => {
    if (bitmap) {
      const pixel = readPixelsToArray(layer.props.image, {
        sourceX: bitmap.pixel[0],
        sourceY: bitmap.pixel[1],
        sourceWidth: 1,
        sourceHeight: 1
      });
      // console.log("color picked:"+ pixel);
    }
  }
  })

总结

您了解了如何使用 Air Quality 和 Pollen 热图图块 API 端点：

• 在网页版 Google 地图上加载，同时确保符合使用条款
• 经过优化，可满足您的用例
• 读取功能块值

后续操作

建议的进一步阅读：

• 使用 Air Quality API 为地点提供空气质量感知

贡献者

主要作者：

Thomas Anglaret | Google Maps Platform 解决方案工程师