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

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

Objectif

Les API Air Quality et Pollen offrent d'excellentes opportunités d'ajouter plus d' insights à un trajet ou à une carte pour un lieu 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.

alt_text

Lorsque vous utilisez les points de terminaison des API de tuiles de carte de densité, vous pouvez être confronté à quelques difficultés lors du chargement des tuiles matricielles individuelles, par exemple:

comment charger les tuiles d’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 tuiles de carte de densité (conditions actuelles) dans un ou plusieurs polygones personnalisés.
Qualité de l'air et Pollen sur le trajet : visualiser les données matricielles des tuiles de carte de densité (conditions actuelles) mappées aux points de cheminement de l'itinéraire.

Implémentation

Vous découvrirez quelles cartes sont disponibles et comment elles peuvent être chargées dans une expérience Web. Vous verrez également comment gérer le nombre de requêtes dans l'éventualité où les tuiles seraient chargées sur une carte. Enfin, vous apprendrez à lire les cartes.

Tuiles de carte de densité disponibles par type

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-perse): palette indigo-persane de l'indice universel de la qualité de l'air.
- PM25_INDIGO_PERSIAN: palette indigo-persane d'indice PM2,5.
- GBR_DEFRA: palette de couleurs de l'indice de la qualité de l'air quotidienne (Royaume-Uni)
- DEU_UBA: palette de couleurs de l'indice de la qualité de l'air local en Allemagne.
- CAN_EC: palette de couleurs de l'indice sanitaire de qualité de l'air canadien.
- FRA_ATMO: palette de couleurs de l'indice de la qualité de l'air en France.
- US_IQI: 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 avec un index arborescent.
- GRASS_UPI: le type de carte thermique 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 les tuiles de la 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 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 la TileLayer deck.gl pour charger les tuiles de la carte de densité de la qualité de l'air . Les libellés de carte de base Google Maps s'affichent alors 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 la propriété deck.gl GeoJson pour créer un masque sur le TileLayer de la qualité de l'air.

alt_text

L'exemple ci-dessous utilise un fichier GeoJSON multipolygone de 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 TileLayer de la qualité de l'air.

Carte de densité de la qualité de l'air au cours d'un trajet

alt_text

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 affectez-le au calque. 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 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éfinir la taille des tuiles d'affichage visuel de sorte qu'elles couvrent l'intégralité de la fenêtre d'affichage à n'importe quel niveau de zoom donné valeur recommandée: 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 permettra d'augmenter/diminuer le nombre de demandes de tuiles afin de couvrir toute la fenêtre d'affichage de la carte

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

Fenêtre d'affichage avec tuiles de 256 x 256 pixels ou 512 x 512 pixels

alt_text

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

Lire les valeurs de pixels

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

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

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

alt_text

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

sur une carte Google Maps sur le Web, et être conforme aux Conditions d'utilisation
optimisé pour correspondre à votre cas d'utilisation
lire les valeurs des cartes

Actions suivantes

Documentation complémentaire suggérée:

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

Contributeurs

Principaux auteurs:

Thomas Anglaret | Google Maps Platform Solutions Engineer