Diese Seite wurde von der Cloud Translation API übersetzt.

Luftqualität und Pollenbelastung in Gebieten und Routen

Ziel

Mit der Air Quality API und der Pollen API haben Sie die Möglichkeit, zusätzliche Informationen zu einer Fahrt oder einer Karte an einem bestimmten Ort zu erhalten. Es gibt zwei Möglichkeiten, die aus diesen APIs verfügbaren Daten zu nutzen: den Index als Text oder Heatmap-Kacheln als Rasterbilder.

alt_text

Wenn Sie die APIs-Endpunkte der Heatmap-Kacheln verwenden, kann es beim Laden der einzelnen Rasterkacheln zu Problemen kommen, z. B.:

Wie lade ich Kacheln auf einer Google-Karte im Web? (auch zur Einhaltung der Nutzungsbedingungen für APIs)
wie die Anzahl der Anfragen verwaltet wird.
wie die Tile-Werte gelesen werden?

Beispiele für Anwendungsfälle

Es werden Beispiele für Anwendungsfälle vorgestellt, mit denen Sie versuchen können, die oben genannten Fragen zu beantworten.

Luftqualität und In einem Bereich polieren:Sie können Rasterdaten für Heatmap-Kacheln (aktuelle Bedingungen) in einem oder mehreren benutzerdefinierten Polygonen visualisieren.
Luftqualität und Pollenflug entlang der Route: Heatmap-Kacheln (aktuelle Bedingungen) als Rasterdaten auf Wegpunkten der Route visualisieren

Implementierung

Sie erfahren, welche Kacheln verfügbar sind und wie sie geladen werden können. Außerdem erfahren Sie, wie Sie die Anzahl der Anfragen in einem Szenario verwalten können, in dem die Kacheln auf eine Karte geladen werden. Schließlich wird Ihnen gezeigt, wie Sie die Kacheln lesen können.

Verfügbare Heatmap-Kacheln nach Typen

Air Quality API

- UAQI_RED_GREEN (UAQI, rot-grüne Palette): Rot-grüne Palette (Universaler Luftqualitätsindex).
- UAQI_INDIGO_PERSIAN (UAQI, indigo-persische Palette): Universeller Luftqualitätsindex indigo-persisches Farbschema.
- PM25_INDIGO_PERSIAN: PM2.5-Index indigo-persischer Palette.
- GBR_DEFRA: Farbpalette für den täglichen Luftqualitätsindex (UK)
- DEU_UBA: Farbpalette für den lokalen Luftqualitätsindex in Deutschland
- CAN_EC: Farbpalette für den kanadischen Luftqualitätsindex
- FRA_ATMO: Farbpalette für den Luftqualitätsindex in Frankreich
– US_AQI: Farbpalette für den Luftqualitätsindex (USA)

Pollen API

- TREE_UP: Der Heatmap-Typ repräsentiert eine Karte mit einem Baumindex.
- GRASS_UPI: Der Heatmap-Typ repräsentiert eine grafische Karte mit Grasindex.
– WEED_UPI: Der Heatmap-Typ stellt eine Unkrautindex-Karte dar.

Heatmap-Kacheln im Web anzeigen

Laden Sie die Kacheln und wenden Sie eine Vektormaske an, um nur die gewünschten Bereiche des Darstellungsbereichs der Karte anzuzeigen.

Kacheln laden

Verwenden Sie die Maps JavaScript API, um die Google-Basiskarte zu laden, und die deckgl-Bibliothek, um sich auf das Laden von Rasterkachelbildern vorzubereiten.
Verwenden Sie deck.gl TileLayer, um Heatmap-Kacheln für die Luftqualität zu laden. Dadurch werden Google Maps-Basiskartenlabels über den Heatmap-Kacheln angezeigt (im Gegensatz zu benutzerdefinierten Maps JavaScript-Overlays).


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;

Vektormaske anwenden

Sie können jeden Teil der Heatmap-Kacheln visuell ein- oder ausblenden. Wichtig: Sie müssen die Daten übernehmen, die zum Erstellen der Vektormaske verwendet werden, die auf die Heatmap-Kacheln angewendet wird.

In einem Gebiet:

Verwenden Sie deck.gl GeoJson, um eine Maske über dem Air Quality TileLayer zu erstellen.

alt_text

Im Beispiel unten wird eine GeoJSON-Datei mit mehreren Polygonen von Frankreich verwendet.

// geojson sample

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

Hier finden Sie eine Referenz zur deckgl-Implementierung:


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

Entlang einer Route: Erstellen Sie mit deck.gl und dessen TripsLayer eine Maske über der Luftqualitäts-Kachelebene.

Kachel „Luftqualitäts-Heatmap“ über einer Fahrt

alt_text

API-Anfragen und -Kosten verwalten

Obwohl standardmäßig alle geladenen Kacheln innerhalb derselben Sitzung im lokalen Speicher zwischengespeichert werden, können Sie Folgendes weiter optimieren:

Schränken Sie den Ladebereich ein: Erstellen Sie einen Begrenzungsrahmen (in Rot) und weisen Sie ihn der Ebene zu. Nur Heatmap-Kacheln (in Blau), die den Begrenzungsrahmen abdecken, werden bei einer bestimmten Zoomstufe geladen.

Begrenzungsrahmen (rot), Heatmap-Kacheln (blau)

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

Sie können die Kachelgröße für die visuelle Anzeige so festlegen, dass sie bei jeder Zoomstufe den gesamten Darstellungsbereich abdeckt. empfohlen: zwischen 256 und 1.024.
Wichtig: APIs-Kacheln haben weiterhin eine Auflösung von 256 x 256 Pixeln, aber durch die Anpassung der visuellen Anzeige können Sie die Anzahl der Kachelanfragen erhöhen/verringern, um den gesamten Darstellungsbereich der Karte abzudecken.

Achten Sie darauf, dass dies mit minZoom und maxZoom der Google Maps-Karte funktioniert, d. h.: tilesize:1024 werden keine Kacheln mit Zoomstufe 0 oder 1 laden.

Darstellungsbereich mit Kacheln 256 x 256 Pixel vs. 512 x 512 Pixel

alt_text

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

Pixelwerte lesen

Zur Darstellung des entsprechenden Werts auf einer Farbskala

Sie können die Luma.gl und ihre readPixelsToArray-Methode verwenden, wenn Sie ein onClick-Ereignis als Attribut der deck.gl-Ebene zugewiesen haben.

Pixelwert: rgba(128,0,0,255)

alt_text

NIEDRIG alt_text HOCH


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

Fazit

Sie haben gelernt, wie API-Endpunkte die API-Endpunkte Air Quality und Pollen für die Heatmap-Kacheln haben:

auf einer Google Maps-Karte im Web geladen und den Nutzungsbedingungen
passend zu Ihrem Anwendungsfall optimiert
Tile-Werte lesen

Nächste Aktionen

Weitere Informationen:

Beurteilung der Luftqualität in Places mithilfe der Air Quality API

Beitragende

Hauptautoren:

Thomas Anglaret | Google Maps Platform Solutions Engineer