Ta strona została przetłumaczona przez Cloud Translation API.

Jakość powietrza i stężenie pyłków na obszarach i na trasach

Cel

Interfejsy API Air Quality i Pollen dają duże możliwości dodawania więcej statystyk do podróży lub mapy w dowolnym miejscu. Dane dostępne w tych interfejsach API można przetwarzać na 2 sposoby: indeksować je jako tekst lub fragmenty mapy termicznej jako obrazy rastrowe.

alt_text

Podczas korzystania z punktów końcowych interfejsów API kafelków mapy termicznej podczas wczytywania poszczególnych kafelków rastrów możesz napotkać kilka problemów, na przykład:

Jak wczytać kafelki na Mapę Google w internecie? (także w celu zapewnienia zgodności z Warunkami korzystania z interfejsów API)
Jak zarządzać liczbą próśb podczas korzystania z usługi?
Jak odczytywać wartości kafelków?

Przykładowe przypadki użycia

Zaprezentujemy przykładowe przypadki użycia, które pomogą Ci znaleźć odpowiedzi na powyższe pytania.

Jakość powietrza Stężenie pyłków na danym obszarze: zwizualizuj kafelki mapy termicznej (bieżące warunki) danych rastrowych wewnątrz jednego lub wielu niestandardowych wielokątów.
Jakość powietrza Pyłki na trasie: wizualizować fragmenty mapy termicznej (bieżące warunki) zmapowane na punkty pośrednie na trasach.

Implementacja

Dowiesz się, jakie kafelki są dostępne i jak można je wczytywać w przeglądarce. Dowiesz się też, jak można zarządzać liczbą żądań w sytuacji, gdy kafelki są wczytywane na mapie. Na koniec pokażemy, jak odczytywać kafelki.

Dostępne kafelki mapy termicznej według typu

Interfejs Air Quality API

- UAQI_RED_GREEN (UAQI, paleta czerwono-zielona): paleta czerwono-zielonego wskaźnika jakości powietrza Universal Air Quality Index.
- UAQI_INDIGO_PERSIAN (UAQI, paleta indygo-perska): paleta Universal Air Quality Index w kolorze indigo-persian.
- PM25_INDIGO_PERSIAN: paleta PM2,5, indygo-persian.
- GBR_DEFRA: paleta kolorów określająca dzienny indeks jakości powietrza (Wielka Brytania).
- DEU_UBA: paleta kolorów niemieckiego indeksu jakości powietrza w Niemczech.
- CAN_EC: paleta kolorów kanadyjskiego indeksu jakości powietrza (Air Quality Health Index).
- FRA_ATMO: paleta kolorów francuskiego indeksu jakości powietrza.
- US_AQI: paleta kolorów amerykańskiego indeksu jakości powietrza.

Pollen API

- TREE_UP: typ mapy termicznej reprezentuje mapę graficzną indeksu drzew.
- GRASS_UPI: typ mapy termicznej przedstawia graficzną mapę wskaźnika trawy.
- WEED_UPI: typ mapy termicznej przedstawia indeks chwastów w formie graficznej.

Wyświetlaj kafelki mapy termicznej w przeglądarce

Wczytaj kafelki i zastosuj maskę wektorową, aby wyświetlić tylko żądane obszary widocznego obszaru mapy.

Wczytuję kafelki

Użyj interfejsu Maps JavaScript API, aby wczytać mapę bazową Google i bibliotekę deckgl, aby przygotować się do wczytywania obrazów rastrowych.
Aby wczytać elementy mapy termicznej Jakość powietrza , użyj tab.gl TileLayer. Spowoduje to wyświetlanie etykiet mapy podstawowej Map Google na kartach mapy termicznej (w przeciwieństwie do niestandardowych nakładek JavaScript Map Google).


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;

Stosowanie maski wektorowej

Możesz ukryć lub pokazać dowolną część kafelków mapy termicznej. Ważne: musisz uzyskać dane, które zostaną użyte do utworzenia maski wektorowej zastosowanej do kafelków mapy termicznej.

W obszarze:

użyj table.gl GeoJson, aby utworzyć maskę nad materiałem Air Quality TileLayer.

alt_text

W przykładzie poniżej użyto GeoJSON z wielokątami dla Francji

// geojson sample

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

Tutaj znajdziesz informacje o implementacji 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
  ...
  })
  ]

Na trasie: użyj deck.gl z parametrem TripsLayer, aby utworzyć maskę nad materiałem Air Quality TileLayer.

Kafelek mapy termicznej jakości powietrza podczas podróży

alt_text

Zarządzanie żądaniami do interfejsu API i kosztami

Choć domyślnym działaniem przeglądarki jest zazwyczaj buforowanie wszystkich wczytanych kafelków w pamięci lokalnej (podczas tej samej sesji), możesz jeszcze bardziej zoptymalizować:

Ogranicz obszar wczytywania: utwórz ramkę ograniczającą (w kolorze czerwonym) i przypisz ją do warstwy. Na każdym poziomie powiększenia będą ładowane tylko kafelki mapy termicznej (niebieskie) obejmujące ramkę ograniczającą.

Ramka ograniczająca (w kolorze czerwonym), kafelki mapy termicznej (niebieskie)

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

Ustaw rozmiar kafelka z widokiem, aby uwzględnić cały widoczny obszar przy dowolnym poziomie powiększenia. zalecane: od 256 do 1024.
Ważne: kafelki interfejsów API pozostają w rozdzielczości 256 x 256, ale wizualne dostosowanie wyświetlania pozwoli zwiększyć/zmniejszyć liczbę żądań kafelków, aby objąć cały widoczny obszar mapy

(upewnij się, że działa z parametrami minZoom i maxZoom w Mapach Google, tzn. tilesize:1024 nie będzie wczytywał kafelków przy powiększeniu 0 lub 1.

Widoczny obszar z kafelkami 256 x 256 pikseli i 512 x 512 pikseli

alt_text

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

Odczytuj wartości w pikselach

Aby wyświetlić odpowiednią wartość na skali kolorów

Możesz użyć biblioteki Luma.gl i jej metody readPixelsToTab po zdarzeniu onClick przypisanego jako właściwość warstwy suite.gl.

Wartość piksela: rgba(128,0,0,255)

alt_text

NISKA alt_text WYSOKA


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

Podsumowanie

Wiesz już, jak punkty końcowe interfejsu API Jakość powietrza i pyłkowanie mogą wyglądać tak:

wczytane do Map Google w przeglądarce, ale muszą być zgodne z Warunkami korzystania z usługi.
zoptymalizowane pod kątem Twojego przypadku użycia
odczytywanie wartości kafelków

Następne działania

Sugerujemy dodatkowe artykuły:

Określanie jakości powietrza w Miejscach przy użyciu interfejsu Air Quality API

Współtwórcy

Główni autorzy:

Thomas Anglaret | Inżynier rozwiązań Google Maps Platform