Diese Seite wurde von der Cloud Translation API übersetzt.

Luftqualität und Pollen in Gebieten und auf Routen

Ziel

Die Air Quality API und die Pollen API bieten hervorragende Möglichkeiten, einer Fahrt oder Karte an einem bestimmten Ort weitere Informationen hinzuzufügen. Es gibt zwei Möglichkeiten, die Daten dieser APIs zu verwenden: als Index als Text oder als Heatmap-Kacheln als Rasterbilder.

alt_text

Wenn Sie die Endpunkte der Heatmap-Kacheln-APIs verwenden, können beim Laden der einzelnen Rasterkacheln einige Probleme auftreten, z. B.:

Wie lade ich die Kacheln auf eine Google-Karte im Web? (auch zur Einhaltung der Nutzungsbedingungen für APIs)
wie die Anzahl der Anfragen während des Tests verwaltet wird?
Wie lese ich die Werte der Kacheln?

Beispiele für Anwendungsfälle

Sie sehen sich Beispielanwendungsfälle an, um die oben genannten Fragen zu beantworten.

Luftqualität und Pollen in einem Bereich:Visualisieren Sie Rasterdaten für Heatmap-Kacheln (aktuelle Bedingungen) innerhalb eines oder mehrerer benutzerdefinierter Polygone.
Luftqualität und Pollen entlang der Route:Visualisierung von Heatmap-Kacheln (aktuelle Bedingungen) als Rasterdaten, die auf Wegpunkte der Routen zugeordnet sind.

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. Abschließend erfahren Sie, wie Sie die Kacheln lesen.

Verfügbare Heatmap-Kacheln nach Typ

Air Quality API

– UAQI_RED_GREEN (LQI, rot-grüne Palette): Rot-grüne Palette für den universellen Luftqualitätsindex.
- UAQI_INDIGO_PERSIAN (UAQI, Indigo-persische Palette): Universal Air Quality Index (Universeller Luftqualitätsindex), Indigo-persische Palette.
– PM25_INDIGO_PERSIAN: Palette „Indigo-persisch“ für den PM2.5-Index.
– GBR_DEFRA: Farbvorlage für den täglichen Luftqualitätsindex (Vereinigtes Königreich)
– DEU_UBA: Farbpalette für den lokalen Luftqualitätsindex in Deutschland
– CAN_EC: Farbvorlage 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 stellt eine grafische Karte des Baumindexes dar.
– GRASS_UPI: Der Heatmap-Typ stellt eine grafische Karte des Grasindexes dar.
– WEED_UPI: Der Heatmap-Typ stellt einen Unkrautindex grafisch 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.

Ansichten laden

Laden Sie mit der Maps JavaScript API die Google-Basemap und die deckgl-Bibliothek, um das Laden von Rasterkacheln vorzubereiten.
Verwenden Sie den TileLayer von deck.gl, 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 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:

Mit deck.gl GeoJson eine Maske über der Luftqualitäts-Kachelebene erstellen.

alt_text

Im folgenden Beispiel wird ein Multipolygon-GeoJSON für 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 für die 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: Verwenden Sie deck.gl mit der TripsLayer, um eine Maske über der Luftqualitäts-Kachelebene zu erstellen.

Heatmap zur Luftqualität über einer Fahrt

alt_text

API-Anfragen und Kosten verwalten

Standardmäßig werden im Browser alle geladenen Kacheln innerhalb derselben Sitzung im lokalen Speicher im Cache gespeichert. Sie können die Leistung jedoch 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) und 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
    ...
 })

Legen Sie die Größe der visuellen Anzeigekacheln so fest, dass sie bei jeder Zoomstufe den gesamten Darstellungsbereich abdecken. Empfohlen: 256 bis 1.024.
Wichtig: Die Auflösung der API-Kacheln bleibt bei 256 × 256, aber mit der visuellen Anzeigeanpassung können Sie die Anzahl der Kacheln erhöhen oder verringern, um den gesamten Karten-Viewport 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.

Ansichtsbereich mit Kacheln mit 256 × 256 Pixeln im Vergleich zu 512 × 512 Pixeln

alt_text

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

Pixelwerte lesen

So geben Sie den entsprechenden Wert in einer Farbskala an:

Sie können die Luma.gl-Bibliothek und die Methode „readPixelsToArray“ bei einem onClick-Ereignis verwenden, das der deck.gl-Ebene als Prop zugewiesen ist.

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 die API-Endpunkte für Heatmap-Kacheln der Luftqualität und der Pollen folgendermaßen verwendet werden können:

in eine Google-Karte im Web geladen werden und den Nutzungsbedingungen entsprechen.
für Ihren Anwendungsfall optimiert
Werte der Kacheln lesen

Nächste Aktionen

Empfohlene weiterführende Informationen:

Informationen zur Luftqualität für Google Places mit der Air Quality API

Beitragende

Hauptautoren:

Thomas Anglaret | Google Maps Platform Solutions Engineer