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

Objectif

Les API Air Quality et Pollen offrent de nombreuses possibilités d'ajouter des insights à un trajet ou à une carte à un emplacement donné. Il existe deux façons d'utiliser les données disponibles à partir de ces API: les indexer sous forme de texte ou les tuiles de carte de densité sous forme d'images matricielles.

Lorsque vous utilisez les points de terminaison des API cartes thermiques, 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 ? (et respecter les Conditions d'utilisation des API)
• Comment gérer le nombre de requêtes pendant l'expérience ?
• Comment lire les valeurs des cartes ?

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 cartes thermiques (conditions actuelles) dans un ou plusieurs polygones personnalisés.
• Qualité de l'air et pollen sur le trajet:visualisez les données raster de carte de densité (conditions actuelles) cartographiées sur les points de cheminement des itinéraires.

Implémentation

Vous découvrirez les cartes disponibles et comment elles peuvent être chargées dans une expérience Web. Vous découvrirez également comment 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 cartes.

Cartes de chaleur disponibles par type

API Air Quality

- UAQI_RED_GREEN (UAQI, palette rouge-vert): palette rouge-vert de l'indice de la qualité de l'air universel.
- UAQI_INDIGO_PERSIAN (UAQI, palette indigo-persan): palette indigo-persan de l'indice de qualité de l'air universel.
- 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ésente une carte graphique de l'arborescence de l'index.
- GRASS_UPI: le type de carte de densité représente une carte graphique d'indice d'herbe.
- WEED_UPI: le type de carte de densité représente un index de mauvaises herbes sous forme graphique.

Afficher des cartes 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 matricielles.
• Utilisez TileLayer de deck.gl pour charger des cartes 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 thermique (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 cartes de densité. Important: Vous devez acquérir les données qui seront utilisées pour créer le masque vectoriel appliqué aux cartes 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 multipolygone geojson 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
  ...
  })
  ]

• Sur un trajet: utilisez deck.gl avec son TripsLayer pour créer un masque sur la carte de la qualité de l'air.

Carte de densité de la qualité de l'air au cours 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 tuiles chargées dans un espace de stockage local (au cours de la même session), vous pouvez optimiser davantage:

• Limiter la zone de chargement: créez un cadre de délimitation (en rouge) et attribuez-le à la couche. Seules les tuiles de la carte de densité (en bleu) qui recouvrent le cadre de délimitation se chargeront à un niveau de zoom donné.

Cadre de délimitation (en rouge), tuiles de la 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 de la tuile d'affichage visuel pour qu'elle couvre l'ensemble de la fenêtre d'affichage à n'importe quel niveau de zoom. Nous vous recommandons de choisir une valeur comprise entre 256 et 1 024.

  Important: Les tuiles des API restent à une résolution de 256 x 256, mais l'ajustement de l'affichage visuel vous permet d'augmenter ou de réduire le nombre de requêtes de tuiles pour couvrir l'intégralité de la fenêtre d'affichage de la carte.

  (assurez-vous qu'il fonctionne avec les valeurs minZoom et maxZoom de la carte Google, c'est-à-dire que tilesize:1024 ne charge pas de tuiles au niveau de zoom 0 ou 1).

Fenêtre d'affichage avec des tuiles de 256 x 256 pixels par rapport à 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 des calques grâce au paramètre raffinéStrategy:'no-overlap' (pas de chevauchement) sur "best-available" (meilleure disponibilité) pour éviter tout conflit visuel entre les tuiles.

Lire les valeurs des pixels

Avertissement:Vous pouvez lire et mettre en cache pendant une heure (et non indéfiniment) les cartes de densité ou toute valeur lue à partir de pixels individuels contenus dans les cartes de l'API Air Quality ou Pollen. Reportez-vous aux conditions spécifiques à l'API décrites dans la section "16 API Air Quality" pour valider votre implémentation.

Afficher la valeur correspondante sur un dégradé de couleurs

Vous pouvez utiliser la bibliothèque Luma.gl et sa méthode readPixelsToArray lors d'un événement onClick attribué en tant qu'attribut à la couche deck.gl.

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

FAIBLE  ÉLEVÉ

  // 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 tuiles de carte de densité Qualité de l'air et Pollen peuvent être:

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

Étapes suivantes

Lectures complémentaires suggérées:

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

Contributeurs

Principaux auteurs:

Thomas Anglaret | Ingénieur solutions Google Maps Platform