区域和路线中的空气质量和花粉量
目标
空气质量 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 解决方案工程师