หน้านี้ได้รับการแปลโดย Cloud Translation API

คุณภาพอากาศและละอองเกสรในพื้นที่และเส้นทาง

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

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

alt_text

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

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

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

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

คุณภาพอากาศและละอองเกสร ในพื้นที่: แสดงข้อมูลแรสเตอร์แผนที่ความร้อน (สภาพปัจจุบัน) เป็นภาพภายในรูปหลายเหลี่ยมที่กำหนดเองอย่างน้อย 1 รูป
คุณภาพอากาศและละอองเกสรตลอดเส้นทาง: แสดงข้อมูลแรสเตอร์ของแผนที่ความร้อน (สภาพปัจจุบัน) เป็นภาพบนจุดแวะพักของเส้นทาง

การใช้งาน

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

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

API คุณภาพอากาศ

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

Pollen API

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

แสดงชิ้นส่วนแผนที่ความหนาแน่นในเว็บ

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

กำลังโหลดการ์ด

ใช้ Maps JavaScript API เพื่อโหลด แผนที่ฐานของ Google และโหลดไลบรารี deckgl เพื่อเตรียมโหลดรูปภาพไทล์แรสเตอร์
ใช้ TileLayer ของ deck.gl เพื่อโหลดไทล์แผนที่ความร้อนคุณภาพอากาศ ซึ่งจะแสดงป้ายกำกับแผนที่ฐานบนชิ้นส่วนแผนที่ความหนาแน่นของ Google Maps (ต่างจากการวางซ้อนที่กำหนดเองของ JavaScript ของ Maps)

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 เพื่อสร้างมาสก์บน 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 เพื่อสร้าง มาสก์เหนือ 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 Map ได้ เช่น tilesize:1024 จะไม่โหลดไทล์เมื่อซูม 0 หรือ 1)

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

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 ของแผนภาพความร้อนคุณภาพอากาศและละอองเกสรมีวิธีใช้อย่างไร

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

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

แหล่งข้อมูลอื่นๆ ที่แนะนํา

การรับรู้เกี่ยวกับคุณภาพอากาศสำหรับสถานที่โดยใช้ Air Quality API

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

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

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