Kafelki z informacjami o jakości powietrza i pyłkach

Cel

Interfejsy Jakość powietrza i Pollen API dają duże możliwości dodawania większej liczby statystyk o podróży lub mapie w dowolnej lokalizacji. Dane dostępne w tych interfejsach API można wykorzystywać na 2 sposoby: jako tekst lub jako karty mapy termicznej w postaci obrazów rastrowych.

Podczas korzystania z punktów końcowych interfejsów API kart mapy termicznej możesz napotkać kilka problemów podczas wczytywania poszczególnych kart rastrowych, takich jak:

• jak wczytywać karty w Mapach Google w internecie (również w celu zachowania zgodności z Warunkami korzystania z interfejsów API Warunki korzystania)
• jak zarządzać liczbą żądań podczas korzystania z usługi;
• jak odczytywać wartości kart.

Przykładowe przypadki użycia

Aby odpowiedzieć na powyższe pytania, przedstawimy przykładowe przypadki użycia.

• Jakość powietrza i pyłki w danym obszarze: wizualizacja kart mapy termicznej (aktualne warunki) w postaci danych rastrowych w jednym lub kilku niestandardowych wielokątach.
• Jakość powietrza i pyłki na trasie: wizualizacja kart mapy termicznej (aktualne warunki) w postaci danych rastrowych zmapowanych na punkty trasy.

Implementacja

Dowiesz się, jakie karty są dostępne i jak można je wczytywać w internecie. Zobaczysz też, co można zrobić, aby zarządzać liczbą żądań w sytuacji, gdy karty są wczytywane na mapę. Na koniec dowiesz się, jak odczytywać karty.

Dostępne karty mapy termicznej według typu

Air Quality API

- UAQI_RED_GREEN (UAQI, paleta czerwono-zielona): uniwersalny indeks jakości powietrza, paleta czerwono-zielona.
- UAQI_INDIGO_PERSIAN (UAQI, paleta indygo-perska): uniwersalny indeks jakości powietrza, paleta indygo-perska.
- PM25_INDIGO_PERSIAN: indeks PM2,5, paleta indygo-perska.
- GBR_DEFRA: paleta kolorów dziennego indeksu jakości powietrza (Wielka Brytania).
- DEU_UBA: paleta kolorów niemieckiego lokalnego indeksu jakości powietrza.
- CAN_EC: paleta kolorów kanadyjskiego indeksu jakości powietrza i jej wpływu na zdrowie.
- 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 będzie reprezentować graficzną mapę indeksu drzew.
- GRASS_UPI: typ mapy termicznej będzie reprezentować graficzną mapę indeksu traw.
- WEED_UPI: typ mapy termicznej będzie reprezentować graficzną mapę indeksu chwastów.

Wyświetlanie kart mapy termicznej w internecie

Wczytaj karty i zastosuj maskę wektorową, aby wyświetlać tylko wybrane obszary widocznego obszaru mapy.

Wczytywanie kart

• Użyj interfejsu Maps JavaScript API, aby wczytać mapę podstawową Google, i wczytaj bibliotekę deckgl, aby przygotować się do wczytywania obrazów rastrowych fragmentów mapy.
• Użyj deck.gl TileLayer, aby wczytać karty mapy termicznej jakości powietrza . Spowoduje to wyświetlenie etykiet mapy bazowej Google na kartach mapy termicznej (w przeciwieństwie do niestandardowych nakładek Maps JavaScript).

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 wizualnie ukryć lub wyświetlić dowolną część kart mapy termicznej. Ważne: musisz uzyskać dane, które zostaną użyte do utworzenia maski wektorowej zastosowanej do kart mapy termicznej.

• W danym obszarze:

użyj deck.gl GeoJson, aby utworzyć maskę na warstwie Air Quality TileLayer.

W poniższym przykładzie używamy zbioru wielokątów geojson Francji.

// geojson sample

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

Oto odniesienie do 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ę na warstwie Air Quality TileLayer.

Karta mapy termicznej jakości powietrza na trasie

Zarządzanie żądaniami do interfejsu API i kosztami

Domyślne działanie przeglądarki polega zwykle na buforowaniu wszystkich wczytanych kart w pamięci lokalnej (w ramach tej samej sesji), ale możesz dodatkowo zoptymalizować:

• Ogranicz obszar wczytywania: utwórz ramkę ograniczającą (na czerwono) i przypisz ją do warstwy. Na dowolnym poziomie powiększenia będą wczytywane tylko karty mapy termicznej (na niebiesko) obejmujące ramkę ograniczającą.

Ramka ograniczająca (na czerwono), karty mapy termicznej (na niebiesko)

 // 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 karty wyświetlanej wizualnie tak, aby obejmowała cały widoczny obszar na dowolnym poziomie powiększenia. Zalecamy rozmiar od 256 do 1024.

  Ważne: karty interfejsów API pozostają w rozdzielczości 256 x 256, ale dostosowanie wyświetlania wizualnego pozwoli Ci zwiększyć lub zmniejszyć liczbę żądań kart, aby obejmowały cały widoczny obszar mapy.

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

Widoczny obszar z kartami o wymiarach 256 x 256 pikseli i 512 x 512 pikseli

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

Wskazówka: aby uniknąć wizualnych kolizji między kartami, doprecyzuj ustawienie renderowania kart warstwy za pomocą refinementStrategy: 'no-overlap' zamiast 'best-available'.

Odczytywanie wartości pikseli

Ostrzeżenie: możesz odczytywać i buforować przez 1 godzinę (nie bezterminowo) fragmenty mapy termicznej lub dowolne wartości odczytane z poszczególnych pikseli zawartych w fragmentach interfejsów API Jakości powietrza lub Pollen API. Aby sprawdzić implementację, zapoznaj się z warunkami szczegółowymi interfejsu API w sekcji „16 Air Quality API”

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

Możesz użyć Luma.gl i jej metody readPixelsToArray w przypadku zdarzenia onClick przypisanego jako prop do warstwy deck.gl.

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

NISKA 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

Dowiedziałeś się, jak mogą działać punkty końcowe interfejsów Air Quality i Pollen API kart mapy termicznej:

• wczytywanie w Mapach Google w internecie, przy jednoczesnym zachowaniu zgodności z Warunkami korzystania z usługi;
• optymalizacja pod kątem Twojego przypadku użycia;
• odczytywanie wartości kart.

Następne działania

Sugerowane dalsze lektury:

• Informacje o jakości powietrza w Miejscach za pomocą interfejsu Air Quality API

Współtwórcy

Główni autorzy:

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