Kacheln für Luftqualität und Pollen

Ziel

Die Air Quality API und die Pollen API bieten großartige Möglichkeiten, weitere Informationen zu einer Reise oder Karte an einem bestimmten Ort hinzuzufügen. Es gibt zwei Möglichkeiten, die über diese APIs verfügbaren Daten zu nutzen: als Text oder als Heatmap-Kacheln als Rasterbilder.

alt_text

Bei der Verwendung der API-Endpunkte für Heatmap-Kacheln können beim Laden der einzelnen Rasterkacheln einige Herausforderungen auftreten, z. B.:

  • Wie werden die Kacheln in Google Maps im Web geladen? (auch im Einklang mit den APIs Nutzungsbedingungen)
  • Wie wird die Anzahl der Anfragen während der Nutzung verwaltet?
  • Wie werden die Kachelwerte gelesen?

Beispiele für Anwendungsfälle

Es werden Beispiele für Anwendungsfälle vorgestellt, um die oben genannten Fragen zu beantworten.

  • Luftqualität und Pollen in einem Gebiet: Heatmap-Kacheln (aktuelle Bedingungen) als Rasterdaten in einem oder mehreren benutzerdefinierten Polygonen visualisieren.
  • Luftqualität und Pollen auf einer Route: Heatmap-Kacheln (aktuelle Bedingungen) als Rasterdaten auf Routen-Wegpunkten visualisieren.

Implementierung

Sie erfahren, welche Kacheln verfügbar sind und wie sie in einer Webanwendung geladen werden können. Außerdem sehen Sie, was getan werden kann, um die Anzahl der Anfragen in einem Szenario zu verwalten, in dem die Kacheln auf eine Karte geladen werden. Schließlich wird erläutert, wie die Kacheln gelesen werden.

Verfügbare Heatmap-Kacheln nach Typ

Air Quality API

- UAQI_RED_GREEN (UAQI, rot-grüne Palette): Universeller Luftqualitätsindex, rot-grüne Palette.
- UAQI_INDIGO_PERSIAN (UAQI, Indigo-Persisch-Palette): Universeller Luftqualitätsindex, Indigo-Persisch-Palette.
- PM25_INDIGO_PERSIAN: PM2.5-Index, Indigo-Persisch-Palette.
- GBR_DEFRA: Farbpalette für den täglichen Luftqualitätsindex (Vereinigtes Königreich).
- DEU_UBA: Farbpalette für den deutschen lokalen Luftqualitätsindex.
- CAN_EC: Farbpalette für den kanadischen Luftqualitätsindex.
- FRA_ATMO: Farbpalette für den französischen Luftqualitätsindex.
- US_AQI: Farbpalette für den US-Luftqualitätsindex.

Pollen API

- TREE_UP: Der Heatmap-Typ stellt eine grafische Karte mit einem Baumindex dar.
- GRASS_UPI: Der Heatmap-Typ stellt eine grafische Karte mit einem Grasindex dar.
- WEED_UPI: Der Heatmap-Typ stellt eine grafische Karte mit einem Kräuterindex 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 

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 abrufen, 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 der Air Quality TileLayer zu erstellen.

alt_text

Im folgenden Beispiel wird ein GeoJSON-Multipolygon 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 für die deck.gl-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
  ...
  })
  ]
  • Auf einer Route: Verwenden Sie deck.gl mit der TripsLayer, um eine Maske über der Air Quality TileLayer zu erstellen.

Heatmap-Kachel zur Luftqualität über einer Reise

alt_text

API-Anfragen und Kosten verwalten

Das Standardverhalten des Browsers besteht in der Regel darin, alle geladenen Kacheln im lokalen Speicher zu speichern (innerhalb derselben Sitzung). Sie können dies weiter optimieren:

  • Ladebereich einschränken: Erstellen Sie einen Begrenzungsrahmen (rot) und weisen Sie ihn der Ebene zu. Nur Heatmap-Kacheln (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
    ...
 })
  • Legen Sie die Größe der visuellen Anzeige der Kacheln so fest, dass der gesamte Darstellungsbereich bei jeder Zoomstufe abgedeckt wird. Empfohlen: zwischen 256 und 1024.

    Wichtig: Die Kacheln der APIs haben weiterhin eine Auflösung von 256 × 256, aber durch die Anpassung der visuellen Anzeige können Sie die Anzahl der Kachelanfragen erhöhen oder verringern, um den gesamten Darstellungsbereich der Karte abzudecken.

    Achten Sie darauf, dass die Einstellung mit minZoom und maxZoom von Google Maps funktioniert, d. h. tilesize:1024 lädt keine Kacheln bei Zoomstufe 0 oder 1.

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

alt_text alt_text 



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

Pixelwerte lesen

Entsprechenden Wert auf einer Farbskala anzeigen

Sie können die Luma.gl-Bibliothek und ihre Methode „readPixelsToArray“ für ein „onClick“-Ereignis verwenden, das als Attribut der deck.gl-Ebene 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 erfahren, wie die API-Endpunkte für Heatmap-Kacheln zur Luftqualität und zu Pollen verwendet werden können:

  • Sie können in Google Maps im Web geladen werden und entsprechen dabei den Nutzungsbedingungen.
  • Sie können an Ihren Anwendungsfall angepasst werden.
  • Sie können die Kachelwerte lesen.

Nächste Schritte

Empfohlene weitere Lektüre:

Beitragende

Hauptautoren:

Thomas Anglaret | Google Maps Platform Solutions Engineer