Calidad del aire y polen en áreas y rutas
Objetivo
Las APIs de Air Quality y Pollen ofrecen grandes oportunidades para agregar más estadísticas a un viaje o mapa en cualquier ubicación. Existen dos maneras de consumir los datos disponibles de esas APIs: indexar como texto o mosaicos de mapas de calor como imágenes ráster.
Cuando uses los extremos de las APIs de tiles de mapa de calor, es posible que te enfrentes a algunos desafíos cuando cargues las tarjetas de ráster individuales, como los siguientes:
- ¿Cómo cargar las tarjetas en un mapa de Google en la Web? (también para cumplir con las Condiciones de Uso de las APIs).
- ¿Cómo administrar la cantidad de solicitudes durante la experiencia?
- ¿Cómo leer los valores de las tarjetas?
Ejemplos de casos de uso
Se te presentarán casos de uso de muestra para intentar responder las preguntas anteriores.
- Calidad del aire y polen en un área: Visualiza los datos de ráster de tiles de mapa de calor (condiciones actuales) en uno o varios polígonos personalizados.
- Calidad del aire y polen a lo largo de la ruta: Visualiza los datos de ráster de mosaicos de mapa de calor (condiciones actuales) asignados a los puntos de referencia de las rutas.
Implementación
Descubrirás qué tarjetas están disponibles y cómo se pueden cargar en una experiencia web. También verás qué se puede hacer para administrar la cantidad de solicitudes en una situación en la que las tarjetas se cargan en un mapa. Por último, se te mostrará cómo leer las tarjetas.
Tarjetas de mapa de calor disponibles por tipo
API de Air Quality
- UAQI_RED_GREEN (ICA universal, paleta rojo-verde): Es la paleta rojo-verde del Índice de calidad del aire universal.
- UAQI_INDIGO_PERSIAN (ICA, paleta índigo-persa): Es la paleta índigo-persa del Índice de calidad del aire universal.
- PM25_INDIGO_PERSIAN: Paleta índigo-persa del índice PM2.5.
- GBR_DEFRA: Es la paleta de colores del índice diario de calidad del aire (Reino Unido).
- DEU_UBA: Paleta de colores del índice de calidad del aire local de Alemania.
- CAN_EC: Paleta de colores del Índice de Salud de la Calidad del Aire de Canadá.
- FRA_ATMO: Paleta de colores del índice de calidad del aire de Francia.
- US_AQI: Es la paleta de colores del Índice de calidad del aire de EE.UU.
API de Pollen
- TREE_UP: El tipo de mapa de calor representará un mapa gráfico de índice de árbol.
- GRASS_UPI: El tipo de mapa de calor representará un mapa gráfico del índice de vegetación.
- WEED_UPI: El tipo de mapa de calor representará un mapa gráfico del índice de malezas.
Cómo mostrar mosaicos de mapas de calor en la Web
Carga las tarjetas y aplica una máscara vectorial para mostrar solo las áreas deseadas del viewport del mapa.
Cómo cargar las tarjetas
- Usa la API de Maps JavaScript para cargar el mapa base de Google y la biblioteca de deckgl para prepararte para cargar imágenes de mosaicos de tramas.
- Usa TileLayer de deck.gl para cargar tarjetas de mapa de calor de Calidad del aire . Esto mostrará las etiquetas del mapa base de Google Maps sobre las tarjetas del mapa de calor (a diferencia de las superposiciones personalizadas de 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;
Cómo aplicar una máscara vectorial
Puedes ocultar o mostrar visualmente cualquier parte de las tarjetas del mapa de calor. Importante: Deberás adquirir los datos que se usarán para crear la máscara vectorial aplicada a las tarjetas del mapa de calor.
- En un área:
Usa deck.gl GeoJson para crear una máscara sobre la capa de mosaicos de calidad del aire.
En el siguiente ejemplo, se usa un geojson multipoligonal de Francia.
// geojson sample { "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]] }, "properties": { "name": "France" } }
Esta es una referencia para la implementación de 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 ... }) ]
- A lo largo de una ruta: Usa deck.gl con su TripsLayer para crear una máscara sobre el TileLayer de calidad del aire.
Tarjeta del mapa de calor de la calidad del aire durante un viaje
Administra las solicitudes de API y el costo
Si bien el comportamiento predeterminado del navegador suele ser almacenar en caché todas las tarjetas cargadas en el almacenamiento local (dentro de la misma sesión), puedes optimizar aún más lo siguiente:
- Restringir el área de carga: Crea un cuadro delimitador (en rojo) y asígnale la capa. Solo se cargarán las tarjetas del mapa de calor (en azul) que cubran el cuadro delimitador en cualquier nivel de zoom determinado.
Bounding Box (en rojo) y mosaicos de mapa de calor (en azul)
// Heatmap Tile layer new TileLayer({ id: 'heatmap-tiles', extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng ... })
- Establece el tamaño de la tarjeta de visualización visual para que cubra toda la vista en cualquier nivel de zoom determinado. Se recomienda un tamaño de entre 256 y 1024.
Importante: Las tarjetas de las APIs se mantienen en una resolución de 256 x 256, pero el ajuste de la visualización visual te permitirá aumentar o disminuir la cantidad de solicitudes de tarjetas para cubrir todo el viewport del mapa.
(asegúrate de que funcione con minZoom y maxZoom del mapa de Google, es decir,
tilesize:1024
no cargará mosaicos en el zoom 0 o 1).
Vista con mosaicos de 256 x 256 píxeles en comparación con 512 x 512 píxeles
// Heatmap Tile layer new TileLayer({ id: 'heatmap-tiles', tilesize:256, // <-- change to 512 for instance ... })
Lee los valores de píxeles
Para mostrar el valor correspondiente en una escala de colores
Puedes usar la biblioteca Luma.gl y su método readPixelsToArray en un evento onClick asignado como propiedad a la capa deck.gl.
Valor de píxel: rgba(128,0,0,255)
BAJO
ALTO
// 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); } } })
Conclusión
Descubriste cómo los extremos de la API de mosaicos de mapas de calor de Air Quality y Pollen pueden ser los siguientes:
- cargados en un mapa de Google en la Web, y también asegúrate de cumplir con las Condiciones de uso.
- optimizados para adaptarse a tu caso de uso
- Lee los valores de las tarjetas
Acciones siguientes
Lecturas adicionales sugeridas:
Colaboradores
Autores principales:
Thomas Anglaret | Ingeniero de Soluciones de Google Maps Platform