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

Objectif

Les API Air Quality et Pollen offrent d'excellentes opportunités pour ajouter des informations à un trajet ou à une carte à un emplacement donné. Il existe deux façons d'utiliser les données disponibles à partir de ces API : l'index sous forme de texte ou les tuiles de carte de densité sous forme d'images raster.

Lorsque vous utilisez les points de terminaison des API de tuiles de carte de densité, vous pouvez rencontrer quelques 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 Conditions d'utilisation)
• Comment gérer le nombre de requêtes 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 d'un 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 verrez é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 découvrirez comment lire les tuiles.

Types de tuiles de carte de densité disponibles

API Air Quality

- UAQI_RED_GREEN (UAQI, palette rouge-vert) : palette rouge-vert de l'indice universel de la qualité de l'air.
- UAQI_INDIGO_PERSIAN (UAQI, palette indigo-persan) : palette indigo-persan de l'indice universel de la qualité de l'air.
- PM25_INDIGO_PERSIAN : palette indigo-persan de l'indice PM2,5.
- GBR_DEFRA : palette de couleurs de l'indice quotidien de la qualité de l'air (Royaume-Uni).
- DEU_UBA : palette de couleurs de l'indice local de la qualité de l'air en Allemagne.
- CAN_EC : palette de couleurs de l'indice canadien de la qualité de l'air.
- FRA_ATMO : palette de couleurs de l'indice de la 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ésente une carte graphique de l'indice des arbres.
- GRASS_UPI : le type de carte de densité représente une carte graphique de l'indice des graminées.
- WEED_UPI : le type de carte de densité représente une carte graphique de l'indice des herbacées.

Afficher les tuiles 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.

Charger les tuiles

• 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 deck.gl TileLayer 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 alors au-dessus des tuiles de carte de densité (contrairement aux superpositions personnalisées 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;

Appliquer un masque vectoriel

Vous pouvez masquer ou afficher visuellement n'importe quelle partie des tuiles de 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 carte de densité.

• Dans une zone :

utilisez deck.gl GeoJson pour créer un masque sur le calque de tuiles de qualité de l'air.

L'exemple ci-dessous utilise un 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 son TripsLayer pour créer un masque sur le calque de tuiles de qualité de l'air.

Tuile de carte de densité de la qualité de l'air sur un trajet

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

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

• Limitez la zone de chargement : créez un cadre de délimitation (en rouge) et attribuez-le au calque. Seules les tuiles de carte de densité (en bleu) couvrant le cadre de délimitation seront chargées à un niveau de zoom donné.

Cadre de délimitation (en rouge), tuiles de carte de densité (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 tuiles d'affichage visuel pour couvrir l'ensemble de la fenêtre d'affichage à un niveau de zoom donné. Nous vous recommandons une taille comprise entre 256 et 1 024.

  Important : La résolution des tuiles d'API reste de 256 x 256, mais l'ajustement de l'affichage visuel vous permettra d'augmenter ou de diminuer le nombre de requêtes de tuiles pour couvrir l'ensemble de la fenêtre d'affichage de la carte.

  (assurez-vous que cela fonctionne avec minZoom et maxZoom de la carte Google, par exemple : tilesize:1024 ne chargera pas les tuiles au niveau de zoom 0 ou 1).

Fenêtre d'affichage avec des tuiles de 256 x 256 pixels et de 512 x 512 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 de l'API Air Quality ou Pollen. Consultez les conditions spécifiques de l'API détaillées dans la section 16 "API Air Quality" pour valider votre implémentation

Afficher la valeur correspondante sur une échelle de couleurs

Vous pouvez utiliser la bibliothèque Luma.gl et sa méthode readPixelsToArray sur un événement onClick attribué en tant que prop au calque deck.gl.

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

BASSE HAUTE

  // 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 de tuiles de carte de densité de la qualité de l'air et du pollen peuvent être :

• chargés sur une carte Google sur le Web, tout en veillant à respecter les conditions d'utilisation ;
• optimisés pour correspondre à votre cas d'utilisation ;
• lus pour obtenir les valeurs des tuiles.

Actions suivantes

Suggestions de lecture :

• 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