การ์ดคุณภาพอากาศและละอองเกสร

วัตถุประสงค์

Air Quality และ Pollen API เป็นโอกาสที่ยอดเยี่ยมในการเพิ่ม ข้อมูลเชิงลึก เกี่ยวกับการเดินทางหรือแผนที่ในสถานที่ใดก็ตาม คุณใช้ข้อมูลที่ได้จาก API เหล่านี้ได้ 2 วิธี ได้แก่ ดัชนีเป็นข้อความหรือการ์ดแผนที่ความหนาแน่นเป็นรูปภาพแรสเตอร์

alt_text

ขณะใช้ปลายทาง API ของการ์ดแผนที่ความหนาแน่น heatmap tiles คุณอาจพบความท้าทาย 2-3 อย่างขณะโหลดการ์ดแรสเตอร์แต่ละรายการ เช่น

  • วิธีโหลดการ์ดใน Google Maps บนเว็บ (รวมถึงการปฏิบัติตามข้อกำหนดในการให้บริการของ API)
  • วิธีจัดการจำนวนคำขอระหว่างประสบการณ์การใช้งาน
  • วิธีอ่านค่าการ์ด

กรณีการใช้งานตัวอย่าง

คุณจะเห็นกรณีการใช้งานตัวอย่างเพื่อพยายามตอบคำถามข้างต้น

การใช้งาน

คุณจะได้ทราบว่ามีการ์ดใดบ้างที่ใช้ได้และวิธีโหลดการ์ดเหล่านั้นในประสบการณ์การใช้งานบนเว็บ นอกจากนี้ คุณจะได้เห็นสิ่งที่ทำได้เพื่อจัดการจำนวนคำขอในสถานการณ์ที่โหลดการ์ดลงในแผนที่ และสุดท้าย คุณจะได้ทราบวิธีอ่านการ์ด

การ์ดแผนที่ความหนาแน่นที่ใช้ได้ตามประเภท

Air Quality API

- UAQI_RED_GREEN (UAQI, จานสีแดง-เขียว): ดัชนีคุณภาพอากาศสากล จานสีแดง-เขียว
- UAQI_INDIGO_PERSIAN (UAQI, จานสีคราม-เปอร์เซีย): ดัชนีคุณภาพอากาศสากล จานสีคราม-เปอร์เซีย
- PM25_INDIGO_PERSIAN: ดัชนี PM2.5 จานสีคราม-เปอร์เซีย
- GBR_DEFRA: จานสีดัชนีคุณภาพอากาศรายวัน (สหราชอาณาจักร)
- DEU_UBA: จานสีดัชนีคุณภาพอากาศในพื้นที่ของเยอรมนี
- CAN_EC: จานสีดัชนีคุณภาพอากาศและสุขภาพของแคนาดา
- FRA_ATMO: จานสีดัชนีคุณภาพอากาศของฝรั่งเศส
- US_AQI: จานสีดัชนีคุณภาพอากาศของสหรัฐอเมริกา

Pollen API

- TREE_UP: ประเภทแผนที่ความหนาแน่นจะแสดงแผนภูมิของดัชนีต้นไม้
- GRASS_UPI: ประเภทแผนที่ความหนาแน่นจะแสดงแผนภูมิของดัชนีหญ้า
- WEED_UPI: ประเภทแผนที่ความหนาแน่นจะแสดงแผนภูมิของดัชนีวัชพืช

แสดงการ์ดแผนที่ความหนาแน่นในเว็บ

โหลดการ์ดและใช้มาสก์เวกเตอร์เพื่อแสดงเฉพาะพื้นที่ที่ต้องการของวิวพอร์ตของแผนที่

การโหลดการ์ด 

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;

การใช้มาสก์เวกเตอร์

คุณสามารถซ่อนหรือแสดงส่วนใดก็ได้ของการ์ดแผนที่ความหนาแน่น สำคัญ: คุณจะต้องรับข้อมูลที่จะใช้สร้างมาสก์เวกเตอร์ที่ใช้กับการ์ดแผนที่ความหนาแน่น

  • ในพื้นที่:

    • ใช้ deck.gl GeoJson เพื่อสร้างมาสก์ เหนือ Air Quality TileLayer

alt_text

ตัวอย่างด้านล่างใช้ geojson แบบหลายรูปหลายเหลี่ยมของฝรั่งเศส 

// geojson sample

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

นี่คือข้อมูลอ้างอิงสำหรับการใช้งาน 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
  ...
  })
  ]
  • ตามเส้นทาง: ใช้ deck.gl กับ TripsLayer เพื่อสร้าง มาสก์ เหนือ Air Quality TileLayer

การ์ดแผนที่ความหนาแน่นของคุณภาพอากาศเหนือการเดินทาง

alt_text

จัดการคำขอ API และค่าใช้จ่าย

แม้ว่าลักษณะการทำงานเริ่มต้นของเบราว์เซอร์มักจะแคชการ์ดที่โหลดทั้งหมดไว้ในพื้นที่เก็บข้อมูลในเครื่อง (ภายในเซสชันเดียวกัน) แต่คุณยังเพิ่มประสิทธิภาพได้อีกดังนี้

  • จำกัดพื้นที่การโหลด: สร้างกรอบล้อมรอบ (สีแดง) และกำหนดให้กับเลเยอร์ โดยระบบจะโหลดเฉพาะการ์ดแผนที่ความหนาแน่น (สีน้ำเงิน) ที่ครอบคลุมกรอบล้อมรอบในระดับการซูมที่กำหนด

กรอบล้อมรอบ (สีแดง), การ์ดแผนที่ความหนาแน่น (สีน้ำเงิน)

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
    ...
 })
  • ตั้งค่าขนาดการ์ดที่แสดงผลให้ครอบคลุมวิวพอร์ตทั้งหมดในระดับการซูมที่กำหนด โดยขนาดที่แนะนำคือระหว่าง 256 ถึง 1024

    สำคัญ: การ์ด API จะยังคงมีความละเอียด 256x256 แต่การปรับการแสดงผลจะช่วยให้คุณเพิ่ม/ลดจำนวนคำขอการ์ดเพื่อครอบคลุมวิวพอร์ตของแผนที่ทั้งหมดได้

    (ตรวจสอบว่าการ์ดทำงานร่วมกับ minZoom และ maxZoom ของ Google Maps ได้ เช่น tilesize:1024 จะไม่โหลดการ์ดที่ระดับการซูม 0 หรือ 1)

วิวพอร์ตที่มีการ์ดขนาด 256x256 พิกเซลเทียบกับ 512x512 พิกเซล

alt_text alt_text 



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

อ่านค่าพิกเซล

วิธีแสดงค่าที่เกี่ยวข้องในสเกลสี

คุณสามารถใช้ Luma.gl และเมธอด readPixelsToArray ในเหตุการณ์ onClick ที่กำหนดเป็นพร็อพให้กับเลเยอร์ deck.gl

ค่าพิกเซล: rgba(128,0,0,255)

alt_text

ต่ำ alt_text สูง 

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

บทสรุป

คุณได้ทราบวิธีใช้ปลายทาง API ของการ์ดแผนที่ความหนาแน่นของ Air Quality และ Pollen ดังนี้

  • โหลดใน Google Maps บนเว็บ รวมถึงตรวจสอบว่าการ์ดเป็นไปตามข้อกำหนดในการให้บริการ
  • เพิ่มประสิทธิภาพให้ตรงกับกรณีการใช้งานของคุณ
  • อ่านค่าการ์ด

การดำเนินการถัดไป

เนื้อหาที่แนะนำให้อ่านเพิ่มเติม

ผู้ร่วมให้ข้อมูล

ผู้เขียนหลัก

Thomas Anglaret | วิศวกรโซลูชัน Google Maps Platform