区域和路线中的空气质量和花粉量
目标
空气质量 API 和 Pollen API 提供了为任意指定地点的行程或地图添加更多 数据分析的绝佳机会。您可通过两种方式使用这些 API 提供的数据：将索引作为文本使用，或者将热图图块用作光栅图像。
在使用热图图块 API 端点时，您在加载单个光栅图块时可能会遇到一些挑战，例如：
- 如何在网络上的 Google 地图上加载图块？（也需遵守 API 使用条款）
- 如何管理体验期间的请求数量？
- 如何读取图块值？
示例应用场景
我们将向您介绍使用场景示例，尝试回答上述问题。
实现
您将了解到哪些功能块可用，以及如何在 Web 体验中加载它们。您还将看到在图块被加载到地图上时，您可以采取哪些措施来管理请求数量。最后，您将了解如何阅读板块。
不同类型可用的热图图块
Air Quality API
- UAQI_RED_GREEN（UAQI，红-绿调色板）：Universal Air Quality Index 红绿调色板。
- UAQI_INDIGO_PERSIAN（UAQI，靛-波斯颜色调色板）：通用空气质量指数 (Universal Air Quality Index) 靛蓝色调色板。
- PM25_INDIGO_PERSIAN：PM2.5 指数靛蓝色调色板。
- GBR_DEFRA：每日空气质量指数（英国）调色板。
- 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 在空气质量图块图层上创建面具。
以下示例使用的是法国的多重多边形 GeoJSON
// 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 可以在空气质量图块图层上创建 面具
行程期间的空气质量热图图块
管理 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
...
})
<ph type="x-smartling-placeholder">
读取像素值
。在色阶上显示相应的值
在被指定为 deck.gl 层的 onClick 事件后，您可以使用 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);
}
}
})
总结
- 在网页版 Google 地图上加载时，请务必遵守使用条款
- 根据您的使用场景进行了优化
- 读取图块值
后续操作
建议深入阅读：
创作贡献者
主要作者：
Thomas Anglaret |Google Maps Platform 解决方案工程师