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

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

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

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

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

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

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

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

การใช้งาน

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

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

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

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

API เกสรดอกไม้

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

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

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

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

• ใช้ Maps JavaScript API เพื่อโหลดแผนที่ฐานของ Google และโหลดไลบรารี deckgl เพื่อเตรียมพร้อมสำหรับการโหลดภาพชิ้นส่วนแรสเตอร์
• ใช้ Deck.gl TileLayer เพื่อโหลดชิ้นส่วนแผนที่ความหนาแน่นคุณภาพอากาศ ซึ่งจะแสดงป้ายกำกับแผนที่ฐานบนชิ้นส่วนแผนที่ความหนาแน่นของ 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 ของคุณภาพอากาศ

ตัวอย่างด้านล่างใช้ 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 สำหรับคุณภาพอากาศ

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

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

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

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

กล่องขอบเขต (สีแดง), ชิ้นส่วนแผนที่ความหนาแน่น (สีฟ้า)

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

• ตั้งค่าขนาดชิ้นส่วนภาพที่แสดงให้ครอบคลุมทั้งวิวพอร์ตในระดับการซูมที่กำหนด แนะนำ: ระหว่าง 256 ถึง 1,024

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

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

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

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

เคล็ดลับ: ปรับแต่งการตั้งค่าการแสดงผลชิ้นส่วนเลเยอร์ด้วย identifierStrategy: "ไม่ซ้อนทับ" มากกว่า "ดีที่สุด" เพื่อไม่ให้ภาพชนกันระหว่างการ์ด

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

คําเตือน: คุณจะอ่านและแคชได้เป็นเวลา 1 ชั่วโมง (โดยไม่มีกําหนด) การ์ดแผนที่ความหนาแน่น หรือค่าใดก็ตามที่อ่านจากพิกเซลแต่ละพิกเซลที่อยู่ในการ์ดคุณภาพอากาศหรือ Pollen API โปรดดูข้อกำหนดเฉพาะ API อย่างละเอียดในส่วน "16 API คุณภาพอากาศ" เพื่อตรวจสอบการติดตั้งใช้งาน

เพื่อแสดงค่าที่สอดคล้องกันในสเกลสี

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

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

ต่ำ สูง

  // 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