Kualitas Udara dan Serbuk sari di area dan rute

Tujuan

API Kualitas Udara dan Pollen menawarkan peluang bagus untuk menambahkan lebih banyak insight ke perjalanan atau peta di lokasi tertentu. Ada dua cara untuk menggunakan data yang tersedia dari API tersebut: indeks sebagai petak teks atau peta panas sebagai gambar raster.

Saat menggunakan endpoint API kartu peta panas, Anda mungkin akan menghadapi beberapa tantangan saat memuat ubin raster individual seperti:

• bagaimana cara memuat ubin pada Google Maps di Web? (juga untuk mematuhi Persyaratan penggunaan API)
• bagaimana cara mengelola jumlah permintaan selama pengalaman berlangsung?
• bagaimana cara membaca nilai ubin?

Kasus penggunaan sampel

Anda akan melihat contoh kasus penggunaan untuk mencoba menjawab pertanyaan di atas.

• Kualitas Udara & Serbuk sari di area: memvisualisasikan petak peta panas (kondisi saat ini) di dalam satu atau beberapa poligon kustom.
• Kualitas Udara & Serbuk sari di sepanjang rute: memvisualisasikan petak peta panas (kondisi saat ini) data raster yang dipetakan pada titik jalan rute.

Penerapan

Anda akan menemukan kartu yang tersedia dan bagaimana kartu tersebut dapat dimuat di pengalaman Web. Anda juga akan melihat apa yang bisa dilakukan untuk mengelola jumlah permintaan dalam skenario di mana petak dimuat ke peta. Terakhir Anda akan disajikan cara membaca ubin.

Petak peta panas yang tersedia menurut jenis

Air Quality API

- UAQI_RED_GREEN (UAQI, palet merah-hijau): palet merah-hijau Universal Air Quality Index.
- UAQI_INDIGO_PERSIAN (UAQI, palet nila-persia): Palet nila-persian Indeks Kualitas Udara Universal.
- PM25_INDIGO_PERSIAN: Indeks PM2.5 indigo-persian palet.
- GBR_DEFRA: Palet warna Indeks Kualitas Udara Harian (Inggris Raya).
- DEU_UBA: Palet warna Indeks Kualitas Udara Lokal Jerman.
- CAN_EC: Palet warna Indeks Kesehatan Kualitas Udara Kanada.
- FRA_ATMO: Palet warna Indeks Kualitas Udara Prancis.
- US_AQI: Palet warna Indeks Kualitas Udara AS.

Pollen API

- TREE_UP: Jenis peta panas akan mewakili peta grafis indeks pohon.
- GRASS_UPI: Jenis peta panas akan mewakili peta grafis indeks rumput.
- WEED_UPI: Jenis peta panas akan mewakili peta indeks gulma secara grafis.

Menampilkan petak peta panas di Web

Muat ubin dan terapkan mask vektor untuk hanya menampilkan area yang diinginkan dari area pandang peta.

Memuat ubin

• Gunakan Maps JavaScript API untuk memuat peta dasar Google dan memuat library deckgl untuk mempersiapkan pemuatan gambar ubin raster.
• Gunakan TileLayer deck.gl untuk memuat kartu Peta Panas Kualitas Udara . Tindakan ini akan menampilkan label peta dasar Google Maps di atas ubin peta panas (tidak seperti overlay kustom 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;

Menerapkan Mask vektor

Anda dapat menyembunyikan atau menampilkan bagian mana pun dari ubin peta panas secara visual. Penting: Anda harus mendapatkan data yang akan digunakan untuk membuat mask vektor yang diterapkan ke ubin peta panas.

• Di Area:

gunakan deck.gl GeoJson untuk membuat Mask di atas TileLayer Kualitas Udara.

Contoh di bawah ini menggunakan geojson multipoligon Prancis

// geojson sample

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

Berikut ini referensi untuk implementasi 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
  ...
  })
  ]

• Di sepanjang Rute: Gunakan deck.gl dengan TripsLayer-nya untuk membuat Mask di atas TileLayer Kualitas Udara

Kartu peta panas Kualitas Udara selama perjalanan

Mengelola permintaan dan biaya API

Meskipun perilaku default browser biasanya adalah meng-cache semua ubin yang dimuat di penyimpanan lokal (dalam sesi yang sama), Anda dapat lebih mengoptimalkan:

• Batasi area pemuatan: buat kotak pembatas (warna merah) dan tetapkan ke lapisan, hanya ubin peta panas (berwarna biru) yang menutupi kotak pembatas yang akan dimuat pada tingkat zoom yang ditentukan

Kotak Pembatas (merah), Petak panas (warna biru)

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

• Menyetel ukuran ubin tampilan visual untuk menutupi seluruh area pandang pada tingkat zoom yang ditentukan; direkomendasikan: antara 256 hingga 1024.

  Penting: Petak API tetap pada resolusi 256x256, namun penyesuaian tampilan visual akan memungkinkan Anda menambah/mengurangi jumlah permintaan petak untuk mencakup seluruh Area Pandang peta

  (pastikan fungsi ini berfungsi dengan minZoom dan maxZoom Google Maps, misalnya: tilesize:1024 tidak akan memuat ubin pada tingkat zoom 0 atau 1).

Area pandang dengan kotak 256x256 piksel vs 512x512 piksel

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

Tips: perbaiki setelan render ubin lapisan dengan penyempurnaanStrategi: 'tidak ada tumpang-tindih' lebih dari 'terbaik yang tersedia' untuk menghindari tabrakan visual di antara ubin.

Membaca nilai piksel

Peringatan: Anda bisa membaca dan membuat cache selama 1 jam (bukan terus-menerus), petak peta panas, atau nilai apa pun yang dibaca dari tiap piksel yang terdapat dalam petak Air Quality atau Pollen API. Lihat persyaratan Khusus API yang dijelaskan di bagian '16 Air Quality API' untuk memvalidasi penerapan

Untuk menampilkan nilai yang sesuai pada skala warna

Anda dapat menggunakan library Luma.gl dan metode readPixelsToArray-nya setelah peristiwa onClick yang ditetapkan sebagai properti ke lapisan deck.gl.

Nilai piksel: rgba(128,0,0,255)

RENDAH TINGGI

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

Kesimpulan

Anda telah mempelajari bagaimana endpoint API ubin peta panas Kualitas Udara dan Pollen dapat:

• yang dimuat pada Google Maps di Web. Pastikan juga sesuai dengan Persyaratan penggunaan
• dioptimalkan agar sesuai dengan kasus penggunaan Anda
• membaca nilai kartu

Tindakan Berikutnya

Saran bacaan lebih lanjut:

• Awareness kualitas udara untuk Places menggunakan Air Quality API

Kontributor

Penulis utama:

Thomas Anglaret | Engineer Solusi Google Maps Platform