Qualità dell'aria e polline in zone e percorsi

Obiettivo

Le API Air Quality e Pollen offrono grandi opportunità per aggiungere più informazioni su un viaggio o su una mappa in qualsiasi località specifica. Esistono due modi per consumare i dati disponibili da queste API: indicizzare come testo o riquadri della mappa termica come immagini raster.

alt_text

Quando utilizzi gli endpoint delle API riquadri mappa termica, potresti dover affrontare un paio di problemi durante il caricamento dei singoli riquadri raster, ad esempio:

  • come caricare i riquadri su una mappa di Google sul Web? (anche per rispettare i Termini e condizioni d'uso delle API)
  • come gestire il numero di richieste durante l'esperienza.
  • come leggere i valori dei riquadri?

Esempi di casi d'uso

Ti verranno presentati casi d'uso di esempio per provare a rispondere alle domande precedenti.

  • Qualità dell'aria e Polline in un'area:visualizza i dati raster dei riquadri della mappa termica (condizioni attuali) all'interno di uno o più poligoni personalizzati.
  • Qualità dell'aria e Polline lungo il percorso: visualizzare i dati raster dei riquadri della mappa termica (condizioni attuali) mappati sulle tappe delle route.

Implementazione

Scoprirai quali riquadri sono disponibili e come possono essere caricati in un'esperienza web. Vedrai anche cosa puoi fare per gestire il numero di richieste in uno scenario in cui i riquadri vengono caricati su una mappa. Infine ti verrà mostrato come leggere i riquadri.

Riquadri della mappa termica disponibili per tipo

API Air Quality

- UAQI_RED_GREEN (UAQI, tavolozza rosso-verde): tavolozza rosso-verde dell'indice di qualità dell'aria universale.
- UAQI_INDIGO_PERSIAN (UAQI, tavolozza indaco-persiano): tavolozza dell'indice di qualità dell'aria universale indaco-persiano.
- PM25_INDIGO_PERSIAN: tavolozza indaco-persiana con indice PM2.5.
- GBR_DEFRA: tavolozza dei colori dell'indice giornaliero di qualità dell'aria (Regno Unito).
- DEU_UBA: tavolozza dei colori dell'indice di qualità dell'aria locale tedesco.
- CAN_EC: tavolozza dei colori dell'indice di qualità dell'aria canadese.
- FRA_ATMO: tavolozza dei colori dell'indice di qualità dell'aria in Francia.
- US_IQA: tavolozza dei colori dell'indice di qualità dell'aria statunitense.

API Pollen

- TREE_UP: il tipo di mappa termica rappresenterà una mappa grafica con indice ad albero.
- GRASS_UPI: il tipo di mappa termica rappresenterà una mappa grafica con indice erba.
- WEED_UPI: il tipo di mappa termica rappresenterà graficamente un indice di erbe infestanti.

Visualizza riquadri della mappa termica in Web

Carica i riquadri e applica una maschera vettoriale per visualizzare solo le aree desiderate dell'area visibile della mappa.

Caricamento dei riquadri 


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;

Applicazione di una maschera vettoriale

Puoi nascondere o mostrare visivamente qualsiasi parte dei riquadri della mappa termica. Importante: dovrai acquisire i dati che verranno utilizzati per creare la maschera vettoriale applicata ai riquadri della mappa termica.

  • In un'area:

    • usa deck.gl GeoJson per creare una maschera sul livello Tile di qualità dell'aria.

alt_text

L'esempio seguente utilizza un geoJSON multipoligono della Francia 

// geojson sample

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

Ecco un riferimento per l'implementazione di 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
  ...
  })
  ]
  • Lungo un percorso: utilizza deck.gl con il suo TripsLayer per creare una maschera sopra il Tile Layer di qualità dell'aria.

Riquadro della mappa termica della qualità dell'aria durante una corsa

alt_text

Gestisci richieste API e costi

Anche se il comportamento predefinito del browser prevede di solito la memorizzazione nella cache di tutti i riquadri caricati nello spazio di archiviazione locale (nella stessa sessione), è possibile ottimizzare ulteriormente:

  • Limita l'area di caricamento: crea un riquadro di delimitazione (in rosso) e assegnalo al livello; solo i riquadri della mappa termica (in blu) che coprono il riquadro di delimitazione verranno caricati a qualsiasi livello di zoom specificato

Riquadro di delimitazione (in rosso), riquadri della mappa termica (in blu)

alt_text 

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })
  • Imposta le dimensioni del riquadro di visualizzazione visiva in modo da coprire l'intera area visibile a qualsiasi livello di zoom specificato. consigliato: compreso tra 256 e 1024.

    Importante: i riquadri delle API rimangono alla risoluzione 256x256, ma la regolazione visiva della visualizzazione ti consentirà di aumentare/diminuire il numero di richieste di riquadri per coprire l'intera area visibile della mappa

    (assicurati che funzioni con minZoom e maxZoom di Google Maps, vale a dire tilesize:1024 non verranno caricati riquadri con lo zoom 0 o 1).

Area visibile con riquadri 256 x 256 pixel rispetto a 512 x 512 pixel

alt_text alt_text 



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

Leggi valori pixel

Per visualizzare il valore corrispondente su una scala di colori

Puoi utilizzare la libreria Luma.gl e il suo metodo readPixelsToArray su un evento start assegnato come prop al livello deck.gl.

Valore pixel: rgba(128,0,0,255)

alt_text

BASSO alt_text 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);
    }
  }
  })

Conclusione

Hai scoperto come gli endpoint API delle mappe termiche per i riquadri Qualità dell'aria e Pollen possano essere:

  • caricati su una mappa di Google sul web, assicurandoti inoltre di essere conformi ai Termini e condizioni d'uso
  • ottimizzate per corrispondere al tuo caso d'uso
  • leggi i valori dei riquadri

Azioni successive

Ulteriori letture suggerite:

Collaboratori

Autori principali:

Thomas Anglaret | Solutions Engineer di Google Maps Platform