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

Jakość powietrza i pylenie na obszarach i trasach

Cel

Interfejsy API Air Quality i Pollen dają świetne możliwości dodawania statystyk do podróży lub mapy w dowolnej lokalizacji. 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 interfejsów API kafelków mapy ciepła możesz napotkać pewne problemy podczas wczytywania poszczególnych kafelków rastrowych, takie jak:

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ą żądań podczas interakcji?
jak odczytywać wartości na kafelkach?

Przykładowe przypadki użycia

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

Jakość powietrza i pyłki w danym obszarze: wizualizacja danych rastrowych płytek mapy ciepła (obecne warunki) w ramach jednego lub większej liczby niestandardowych wielokątów.
Jakość powietrza i stężenie pyłków na trasie: wizualizacja płytek mapy ciepła (obecne warunki) danych rastrowych na punktach kontrolnych trasy.

Implementacja

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

Dostępne typy kafelków mapy ciepła

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-persyjska): uniwersalny indeks jakości powietrza w palcie indygo-persyjskiej.
- PM25_INDIGO_PERSIAN: paleta indeksu PM2,5 w kolorze indygo-persyjskim.
- GBR_DEFRA: paleta kolorów dziennego indeksu jakości powietrza (Wielka Brytania).
- DEU_UBA: niemiecka paleta kolorów indeksu jakości powietrza.
– CAN_EC: paleta kolorów odnosząca się do indeksu jakości powietrza (Canadian Air Quality Health Index)
FRA_ATMO: paleta kolorów indeksu jakości powietrza we Francji.
- US_AQI: paleta kolorów indeksu jakości powietrza w Stanach Zjednoczonych.

Pollen API

– TREE_UP: typ mapy termicznej będzie reprezentować mapę graficzną indeksu drzewa.
- GRASS_UPI: typ mapy termicznej będzie reprezentować mapę graficzną indeksu trawy.
- WEED_UPI: typ mapy termicznej będzie reprezentować mapę indeksu chwastów.

Wyświetlanie fragmentów mapy termicznej w przeglądarce

Załaduj kafelki i zacznij stosować maskę wektorową, aby wyświetlać tylko wybrane obszary widoku 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.
Użyj funkcji deck.gl TileLayer, aby załadować jakość powietrza jako kafelki mapy ciepła. Spowoduje to wyświetlenie etykietek mapy bazowej Map Google na kafelkach mapy ciepła (w odróżnieniu od map JavaScript Mapy Google z niestandardowymi nakładkami).

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 ukrywać lub wyświetlać dowolną część płytek mapy ciepła. Ważne: musisz pozyskać dane, które posłużą do utworzenia maski wektorowej nakładanej na kafelki mapy ciepła.

W obszarze:

użyj table.gl GeoJson, aby utworzyć maskę nad warstwą Air Quality TileLayer.

alt_text

W przykładzie poniżej użyto geojsona wielokąta złożonego 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 jego TripsLayer, aby utworzyć maskę dla warstwy TileLayer dotyczącej jakości powietrza.

Płytka z mapą cieplną jakości powietrza na trasie 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. Przy każdym poziomie powiększenia wczytywane będą tylko te kafelki mapy ciepła (w kolorze niebieskim), które pokrywają ramkę ograniczającą.

Ramka ograniczająca (czerwona) i płytki mapy ciepła (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 wizualnego wyświetlania, aby pokrywał cały widoczny obszar przy dowolnym poziomie powiększenia. Zalecane: 256–1024.
Ważne: kafelki interfejsów API mają rozdzielczość 256 x 256, ale dzięki dostosowaniu wyświetlania możesz zwiększać lub zmniejszać liczbę żądań kafelków, aby pokryć cały widoczny obszar mapy.

(upewnij się, że działa ono z minZoom i maxZoom mapy Google, np. tilesize:1024 nie będzie wczytywać płytek przy powiększeniu 0 lub 1).

Widok z kafelkami 256 x 256 pikseli w porównaniu z 512 x 512 pikseli

alt_text

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

odczytywanie wartości pikseli,

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

Po zdarzeniu onClick przypisanym jako element do warstwy deck.gl możesz użyć biblioteki Luma.gl i jej metody readPixelsToArray.

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

Dowiedz się, jak można używać interfejsów API płytek mapy ciepła Air Quality i Pollen:

załadowana w Mapach Google w internecie, a także zgodna z Warunkami korzystania.
zoptymalizowane pod kątem Twojego przypadku użycia
odczytywanie wartości kafelków.

Dalsze działania

Sugerowane materiały do dalszego zapoznania się z tematem:

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

Współtwórcy

Główni autorzy:

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