Kualitas Udara dan Serbuk Sari di area dan rute

Tujuan

Air Quality dan Pollen API menawarkan peluang besar 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 karta panas API, Anda mungkin menghadapi beberapa tantangan saat memuat setiap ubin raster seperti:

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

Kasus penggunaan sampel

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

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

Penerapan

Anda akan menemukan kartu yang tersedia dan cara memuat kartu tersebut 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.

Kartu peta panas yang tersedia menurut jenis

Air Quality API

- UAQI_RED_GREEN (UAQI, palet merah-hijau): Palet merah-hijau Indeks Kualitas Udara Universal.
- UAQI_INDIGO_PERSIAN (UAQI, palet indigo-persian): Palet indigo-persian Indeks Kualitas Udara Universal.
- PM25_INDIGO_PERSIAN: palet indigo-persian indeks PM2.5.
- 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 Amerika Serikat.

Pollen API

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

Menampilkan kartu peta panas di Web

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

Memuat kartu

• 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 ubin 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 kartu peta panas secara visual. Penting: Anda harus mendapatkan data yang akan digunakan untuk membuat mask vektor yang diterapkan ke ubin peta panas.

• Di Area:

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

Contoh di bawah menggunakan geojson multipoligon Prancis

// geojson sample

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

Berikut adalah referensi untuk penerapan 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 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 menyimpan semua kartu yang dimuat dalam penyimpanan lokal ke dalam cache (dalam sesi yang sama), Anda dapat mengoptimalkannya lebih lanjut:

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

Kotak Pembatas (dalam warna merah), Kartu peta panas (dalam 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 agar menutupi seluruh area pandang pada tingkat zoom yang ditentukan; disarankan: antara 256 hingga 1024.

  Penting: Ubin API tetap memiliki resolusi 256x256, tetapi penyesuaian tampilan visual akan memungkinkan Anda meningkatkan/menurunkan jumlah permintaan ubin untuk mencakup seluruh Viewport peta

  (pastikan berfungsi dengan minZoom dan maxZoom Google Maps, yaitu: tilesize:1024 tidak akan memuat ubin pada 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: tingkatkan kualitas setelan rendering ubin lapisan dengan refinementStrategy:'no-overlap' di atas 'best-available' untuk menghindari tabrakan visual antar-ubin.

Membaca nilai piksel

Peringatan: Anda dapat membaca dan menyimpan ke cache selama 1 jam (tidak terbatas), ubin peta panas atau nilai apa pun yang dibaca dari setiap piksel yang terdapat dalam ubin Air Quality atau Pollen API. Lihat istilah Khusus API yang dijelaskan di bagian '16 Air Quality API' untuk memvalidasi penerapan Anda

Untuk menampilkan nilai yang sesuai pada skala warna

Anda dapat menggunakan library Luma.gl dan metode readPixelsToArray-nya setelah peristiwa onClick 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 mengetahui cara endpoint API ubin peta panas Kualitas Udara dan Serbuk Sari 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

Bacaan lebih lanjut yang disarankan:

• Awareness kualitas udara untuk Tempat menggunakan Air Quality API

Kontributor

Penulis utama:

Thomas Anglaret | Engineer Solusi Google Maps Platform