Cette page a été traduite par l'API Cloud Translation.

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é. Vous pouvez utiliser les données disponibles dans ces API de deux manières: en tant qu'index sous forme de texte ou en tant que cartes de chaleur sous forme d'images matricielles.

alt_text

Lorsque vous utilisez les points de terminaison des API de tuiles de carte thermique, 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

Vous verrez des exemples de cas d'utilisation pour essayer 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 cartes 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 découvrirez comment 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 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 quotidien de la qualité de l'air (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 qualité de l'air des É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 de l'indice de végétation.
- WEED_UPI: le type de carte de densité représente une carte graphique de l'indice des mauvaises herbes.

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.

Charger les 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.

alt_text

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 sur un trajet

alt_text

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

Bien que le comportement par défaut du navigateur soit généralement de mettre en cache toutes les tuiles chargées dans le stockage local (au cours d'une 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) couvrant le cadre de délimitation seront chargées à un niveau de zoom donné.

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

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
    ...
 })

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

alt_text

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

Lire les valeurs des pixels

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 qu'attribut à la couche deck.gl.

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

alt_text

FAIBLE alt_text É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 d'API de cartes de densité de l'API Air Quality (Qualité de l'air) et Pollen (Pollen) peuvent être:

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

Étapes suivantes

Lectures complémentaires suggérées:

Informations sur la qualité de l'air pour Places à l'aide de l'API Air Quality

Contributeurs

Auteurs principaux:

Thomas Anglaret | Ingénieur solutions Google Maps Platform