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

Jakość powietrza i pylenie na obszarach i trasach

Cel

Interfejsy Air Quality i Pollen dają duże możliwości dodawania informacji do podróży lub mapy w dowolnej lokalizacji. Dane dostępne w tych interfejsach API można wykorzystywać na 2 sposoby: indeksować jako tekst lub wyświetlać jako rastrowe obrazy kafelków mapy cieplnej.

alt_text

Podczas korzystania z punktów końcowych interfejsów API płytki mapy cieplnej możesz napotkać kilka problemów z wczytywaniem poszczególnych płytek rastrowych, takich jak:

jak wczytać kafelki w Mapach Google w internecie? (również w celu zachowania zgodności z Warunkami korzystania z interfejsów API)
jak zarządzać liczbą żądań podczas korzystania z usługi?
jak odczytywać wartości kafelków?

Przykładowe przypadki użycia

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

Jakość powietrza i pyłkina danym obszarze: wizualizuj kafelki mapy cieplnej (bieżące warunki) w postaci danych rastrowych w obrębie jednego lub kilku niestandardowych wielokątów.
Jakość powietrza i pyłkina trasie: wizualizacja kafelków mapy cieplnej (aktualne warunki) danych rastrowych zmapowanych na punktach trasy.

Implementacja

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

Dostępne kafelki mapy popularności 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, indigo-persian palette): Universal Air Quality Index indigo-persian palette.
- PM25_INDIGO_PERSIAN: PM2.5 index indigo-persian palette.
- 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 zdrowotnego indeksu jakości powietrza.
- 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ć graficzną mapę indeksu drzewa.
- GRASS_UPI: typ mapy termicznej będzie przedstawiał graficzną mapę indeksu trawy.
- WEED_UPI: typ mapy termicznej będzie przedstawiał graficznie mapę indeksu chwastów.

Wyświetlanie kafelków mapy termicznej w internecie

Wczytaj kafelki i zastosuj maskę wektorową, aby wyświetlać tylko wybrane obszary widoku mapy.

Wczytywanie kart

Użyj interfejsu Maps JavaScript API, aby wczytać mapę bazową Google, i wczytaj bibliotekę deckgl, aby przygotować się do wczytywania obrazów kafelków rastrowych.
Użyj warstwy TileLayer w bibliotece deck.gl, aby wczytać kafelki mapy cieplnej jakości powietrza . Spowoduje to wyświetlenie etykiet mapy bazowej Map Google na fragmentach mapy cieplnej (w przeciwieństwie do niestandardowych nakładek w interfejsie 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;

Stosowanie maski wektorowej

Możesz wizualnie ukryć lub wyświetlić dowolną część kafelków mapy popularności. Ważne: musisz zdobyć dane, które zostaną użyte do utworzenia maski wektorowej zastosowanej do kafelków mapy cieplnej.

W przestrzeni:

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

alt_text

W poniższym przykładzie używamy wielokąta 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
  ...
  })
  ]

Wzdłuż trasy: użyj deck.gl z warstwą TripsLayer, aby utworzyć maskę na warstwie Air Quality TileLayer.

Warstwa mapy cieplnej jakości powietrza na trasie

alt_text

Zarządzanie żądaniami interfejsu API i kosztami

Domyślnie przeglądarka zapisuje w pamięci lokalnej wszystkie wczytane kafelki (w ramach tej samej sesji), ale możesz dodatkowo zoptymalizować ten proces:

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

Ramka ograniczająca (czerwona), fragmenty mapy cieplnej (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 wyświetlania wizualnego tak, aby obejmował cały widoczny obszar przy dowolnym poziomie powiększenia. Zalecany rozmiar to od 256 do 1024.
Ważne: kafelki interfejsów API pozostają w rozdzielczości 256 x 256, ale dostosowanie wyświetlania wizualnego pozwoli Ci zwiększyć lub zmniejszyć liczbę żądań kafelków, aby pokryć cały widoczny obszar mapy.

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

Widok z kafelkami o rozmiarach 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
        ...
    })

Odczytywanie wartości pikseli

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

Możesz użyć biblioteki Luma.gl i jej metody readPixelsToArray w zdarzeniu onClick przypisanym jako właściwość do warstwy deck.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

Dowiedziałeś się, jak mogą wyglądać punkty końcowe interfejsu API kafelków mapy cieplnej jakości powietrza i pyłków:

załadowane w Mapach Google w internecie, z zachowaniem zgodności z Warunkami korzystania z usługi.
zoptymalizowany pod kątem Twojego przypadku użycia.
odczytywać wartości kafelków,

Następne działania

Sugerowane dalsze lektury:

Informacje o jakości powietrza w Miejscach dzięki interfejsowi Air Quality API

Współtwórcy

Główni autorzy:

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