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 Route oder Karte an einem bestimmten Ort weitere Statistiken hinzuzufügen. Es gibt zwei Möglichkeiten, die Daten aus diesen APIs zu verwenden: Index als Text oder 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 der 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 Gebiet:Hier können Sie Rasterdaten in Form von Heatmap-Kacheln (aktuelle Bedingungen) in einem oder mehreren benutzerdefinierten Polygonen visualisieren.
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 in einer Webanwendung 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. Zum Schluss erfahren Sie, wie Sie die Kacheln lesen.

Verfügbare Heatmap-Kacheln nach Typ

Air Quality API

– UAQI_RED_GREEN (UAQI, 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: PM2.5-Index mit Indigo-persischer Palette.
– GBR_DEFRA: Farbvorlage für den täglichen Luftqualitätsindex (Vereinigtes Königreich)
- DEU_UBA: Farbpalette für den deutschen lokalen Luftqualitätsindex.
– 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 US-amerikanischen Luftqualitätsindex.

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 Labels der Google Maps-Basiskarte auf den Heatmap-Kacheln angezeigt, im Gegensatz zu benutzerdefinierten Overlays der Maps JavaScript API.

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 erheben, 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 GeoJSON-Multipolygon für Frankreich verwendet.

// geojson sample

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

Hier ist 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:

Ladebereich einschränken: Erstellen Sie einen Begrenzungsrahmen (rot) und weisen Sie ihn der Ebene zu. Bei jeder Zoomstufe werden nur Heatmap-Kacheln (blau) geladen, die den Begrenzungsrahmen abdecken.

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 die Funktion mit minZoom und maxZoom der Google-Karte funktioniert, d. h., dass tilesize:1024 keine Kacheln bei Zoom 0 oder 1 lädt.

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 Klickereignis 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

Weitere Informationen:

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

Beitragende

Hauptautoren:

Thomas Anglaret | Google Maps Platform Solutions Engineer