Qualité de l'air et pollen dans les zones et sur les itinéraires

Objectif

Les API Air Quality et Pollen offrent de nombreuses possibilités d'ajouter des informations à un trajet ou à une carte pour n'importe quel lieu. Vous pouvez utiliser les données disponibles à partir de ces API de deux manières : en les indexant sous forme de texte ou en les affichant sous forme de cartes thermiques en tant qu'images raster.

Lorsque vous utilisez les points de terminaison des API tuiles de carte thermique, vous pouvez rencontrer plusieurs difficultés lors du chargement des tuiles raster individuelles, par exemple :

• Comment charger les tuiles sur une carte Google sur le Web ? (également pour respecter les Conditions d'utilisation des API)
• Comment gérer le nombre de demandes pendant l'expérience ?
• Comment lire les valeurs des tuiles ?

Exemples de cas d'utilisation

Des exemples de cas d'utilisation vous seront présentés pour tenter de répondre aux questions ci-dessus.

• Qualité de l'air et pollen dans une zone : visualisez les données raster des tuiles de carte de densité (conditions actuelles) à l'intérieur d'un ou de plusieurs polygones personnalisés.
• Qualité de l'air et pollen le long de l'itinéraire : visualisez les données raster des tuiles de carte de densité (conditions actuelles) mappées sur les points de repère des itinéraires.

Implémentation

Vous découvrirez les tuiles disponibles et comment les charger dans une expérience Web. Vous découvrirez également ce qui peut être fait pour gérer le nombre de requêtes dans un scénario où les tuiles sont chargées sur une carte. Enfin, vous apprendrez à lire les tuiles.

Types de cartes thermiques disponibles

API Air Quality

- UAQI_RED_GREEN (UAQI, palette rouge-vert) : palette rouge-vert de l'indice universel de qualité de l'air.
- UAQI_INDIGO_PERSIAN (UAQI, palette indigo-persan) : palette indigo-persan de l'indice universel de qualité de l'air.
- PM25_INDIGO_PERSIAN : palette indigo-persan de l'indice PM2.5.
- GBR_DEFRA : palette de couleurs de l'indice de qualité de l'air quotidien (Royaume-Uni).
- DEU_UBA : palette de couleurs de l'indice de qualité de l'air local allemand.
- CAN_EC : palette de couleurs de l'indice canadien de la qualité de l'air et de la santé.
- FRA_ATMO : palette de couleurs de l'indice de qualité de l'air en France.
- US_AQI : palette de couleurs de l'indice de la qualité de l'air aux États-Unis.

API Pollen

- TREE_UP : le type de carte de densité représentera une carte graphique d'index d'arborescence.
- GRASS_UPI : le type de carte de densité représentera une carte graphique de l'indice de végétation.
- WEED_UPI : le type de carte de densité représente un index d'herbes indésirables sous forme de carte graphique.

Afficher les vignettes de carte de densité sur le Web

Chargez les tuiles et appliquez un masque vectoriel pour n'afficher que les zones souhaitées de la fenêtre d'affichage de la carte.

Chargement des cartes

• Utilisez l'API Maps JavaScript pour charger la carte de base Google et la bibliothèque deckgl afin de préparer le chargement des images de tuiles raster.
• Utilisez TileLayer de deck.gl pour charger les tuiles de carte de densité de la qualité de l'air. Les libellés de la carte de base Google Maps s'affichent au-dessus des tuiles de la carte de densité (contrairement aux superpositions personnalisées 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;

Appliquer un masque vectoriel

Vous pouvez masquer ou afficher visuellement n'importe quelle partie des tuiles de la carte de densité. Important : Vous devrez acquérir les données qui seront utilisées pour créer le masque vectoriel appliqué aux tuiles de la carte de densité.

• Dans une zone :

Utilisez GeoJson de deck.gl pour créer un masque sur Air Quality TileLayer.

L'exemple ci-dessous utilise un fichier GeoJSON multipolygone de la France.

// geojson sample

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

Voici une référence pour l'implémentation 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
  ...
  })
  ]

• Le long d'un itinéraire : utilisez deck.gl avec sa TripsLayer pour créer un Mask au-dessus de la tuile Qualité de l'air

Carte thermique de la qualité de l'air le long d'un trajet

Gérer les requêtes API et les coûts

Bien que le comportement par défaut du navigateur consiste généralement à mettre en cache toutes les vignettes chargées dans le stockage local (au cours de la même session), vous pouvez optimiser davantage :

• Limiter la zone de chargement : créer un cadre de délimitation (en rouge) et l’assigner à la couche ; seules les tuiles de carte thermique (en bleu) couvrant ce cadre seront chargées à un niveau de zoom donné.

Cadre de délimitation (en rouge), tuiles de carte thermique (en bleu)

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

• Définissez la taille des vignettes d'affichage visuel pour couvrir l'intégralité de la fenêtre d'affichage à n'importe quel niveau de zoom donné ; recommandé : entre 256 et 1024.

  Important : Les tuiles des API restent à une résolution de 256 x 256, mais le réglage de l’affichage visuel vous permettra d’augmenter ou de diminuer le nombre de requêtes de tuiles pour couvrir toute la zone d’affichage de la carte.

  (assurez-vous que cela fonctionne avec minZoom et maxZoom de la carte Google, c'est-à-dire : tilesize:1024 ne chargera pas les tuiles à un zoom de 0 ou 1).

Fenêtre d'affichage avec des tuiles de 256x256 pixels contre 512x512 pixels

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

Conseil : Affinez le paramètre de rendu des tuiles de calque avec refinementStrategy:'no-overlap' au lieu de 'best-available' pour éviter les collisions visuelles entre les tuiles.

Lire les valeurs des pixels

Avertissement : Vous pouvez lire et mettre en cache pendant une heure (et non indéfiniment) les tuiles de carte de densité ou toute valeur lue à partir de pixels individuels contenus dans les tuiles des API Qualité de l'air ou Pollen. Consultez les conditions spécifiques à l'API détaillées dans la section 16 "API Air Quality" pour valider votre implémentation.

Pour afficher la valeur correspondante sur une échelle de couleurs

Vous pouvez utiliser la bibliothèque Luma.gl et sa méthode readPixelsToArray lors d'un événement onClick attribué en tant que propriété au calque deck.gl.

Valeur du pixel : rgba(128,0,0,255)

FAIBLE ÉLEVÉE

  // 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);
    }
  }
  })

Conclusion

Vous avez découvert comment les points de terminaison de l'API des cartes de densité Qualité de l'air et Pollen peuvent être :

• chargées sur une carte Google sur le Web, en veillant également à respecter les Conditions d'utilisation.
• optimisé pour correspondre à votre cas d'utilisation.
• lire les valeurs des cartes ;

Actions suivantes

Lectures complémentaires suggérées :

• Sensibilisation à la qualité de l'air pour les lieux à l'aide de l'API Air Quality

Contributeurs

Auteurs principaux :

Thomas Anglaret | Ingénieur en solutions Google Maps Platform