Chất lượng không khí và phấn hoa ở các khu vực và tuyến đường

Mục tiêu

Các API Chất lượng không khí và Phấn hoa mang đến những cơ hội tuyệt vời để thêm nhiều thông tin chi tiết hơn vào một chuyến đi hoặc bản đồ tại bất kỳ vị trí nào. Có hai cách sử dụng dữ liệu có sẵn từ các API đó: lập chỉ mục dưới dạng ô văn bản hoặc ô bản đồ nhiệt dưới dạng hình ảnh đường quét.

Trong khi sử dụng các điểm cuối API ô điểm bản đồ nhiệt, bạn có thể gặp phải một số thách thức khi tải từng ô đường quét riêng lẻ, chẳng hạn như:

• cách tải các ô trên Google Maps trên web? (cũng để tuân thủ Điều khoản sử dụng của API)
• làm cách nào để quản lý số lượng yêu cầu trong trải nghiệm?
• làm cách nào để đọc các giá trị của thẻ thông tin?

Các trường hợp sử dụng mẫu

Bạn sẽ được xem các trường hợp sử dụng mẫu để trả lời các câu hỏi trên.

• Chất lượng không khí và Phấn hoa trong một khu vực: trực quan hoá các ô bản đồ nhiệt (tình trạng hiện tại) dữ liệu đường quét bên trong một hoặc nhiều đa giác tuỳ chỉnh.
• Chất lượng không khí và Phấn hoa dọc theo tuyến đường: trực quan hoá các lát bản đồ nhiệt (tình trạng hiện tại) dữ liệu đường quét được ánh xạ trên các điểm tham chiếu tuyến đường.

Triển khai

Bạn sẽ khám phá những thẻ thông tin có sẵn và cách tải các thẻ thông tin đó trong trải nghiệm trên web. Bạn cũng sẽ thấy những việc có thể làm để quản lý số lượng yêu cầu trong trường hợp các ô được tải lên bản đồ. Cuối cùng, bạn sẽ được hướng dẫn cách đọc các thẻ thông tin.

Các lát bản đồ nhiệt có sẵn theo loại

API Chất lượng không khí

– UAQI_RED_GREEN (UAQI, bảng màu đỏ-xanh lục): bảng màu đỏ-xanh lục của Chỉ số chất lượng không khí toàn cầu.
– UAQI_INDIGO_PERSIAN (UAQI, bảng màu chàm-ba): Bảng chỉ số chất lượng không khí toàn cầu (bảng màu chàm – ba chiều).
- PM25_INDIGO_PERSIAN: bảng màu chàm-persian chỉ số PM2.5.
– GBR_DEFRA: Bảng màu chỉ số chất lượng không khí hằng ngày (Vương quốc Anh).
- DEU_UBA: Bảng màu Chỉ số chất lượng không khí địa phương của Đức.
- CAN_EC: Bảng màu Chỉ số sức khoẻ theo chất lượng không khí tại Canada.
– FRA_ATMO: Bảng màu chỉ số chất lượng không khí của Pháp.
– US_AQI: Bảng màu chỉ số chất lượng không khí của Hoa Kỳ.

API Thăm dò

- TREE_UP: Loại bản đồ nhiệt sẽ đại diện cho một bản đồ biểu đồ chỉ số cây.
- GRASS_UPI: Loại bản đồ nhiệt sẽ biểu thị một bản đồ biểu đồ chỉ số cỏ.
- WEED_UPI: Loại bản đồ nhiệt sẽ thể hiện một bản đồ chỉ số cỏ dại dưới dạng đồ thị.

Hiển thị các lát bản đồ nhiệt trong Web

Tải các ô và áp dụng mặt nạ vectơ để chỉ hiển thị các khu vực mong muốn của khung nhìn của bản đồ.

Đang tải thẻ thông tin

• Sử dụng API JavaScript của Maps để tải bản đồ cơ sở của Google và tải thư viện deckgl để chuẩn bị tải hình ảnh ô đường quét.
• Sử dụng Deck.gl TileLayer để tải các ô bản đồ nhiệt Chất lượng không khí . Thao tác này sẽ hiển thị nhãn bản đồ cơ sở trên các ô bản đồ nhiệt của Google Maps (không giống như lớp phủ tuỳ chỉnh JavaScript của 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;

Áp dụng mặt nạ vectơ

Bạn có thể ẩn hoặc hiển thị trực quan bất kỳ phần nào của ô bản đồ nhiệt. Quan trọng: Bạn cần phải thu nạp dữ liệu sẽ dùng để tạo mặt nạ vectơ áp dụng cho các ô bản đồ nhiệt.

• Trong một khu vực:

sử dụng Deck.gl GeoJson để tạo một Mặt nạ trên Air Quality TileLayer.

Ví dụ bên dưới là bằng một tệp geojson nhiều đa giác của Pháp

// geojson sample

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

Dưới đây là tài liệu tham khảo để triển khai bản sao:

  // 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
  ...
  })
  ]

• Dọc theo một tuyến đường: Sử dụng deck.gl cùng với TripsLayer để tạo Mặt nạ trên TileLayer về chất lượng không khí

Ô bản đồ nhiệt về Chất lượng không khí trong một chuyến đi

Quản lý yêu cầu API và chi phí

Mặc dù hành vi mặc định của trình duyệt thường là lưu tất cả các ô đã tải vào bộ nhớ đệm trong bộ nhớ cục bộ (trong cùng một phiên), nhưng bạn vẫn có thể tối ưu hoá hơn nữa:

• Hạn chế vùng tải: tạo một hộp giới hạn (màu đỏ) và gán nó cho lớp, chỉ các lát bản đồ nhiệt (màu xanh dương) bao phủ hộp giới hạn mới tải ở bất kỳ mức thu phóng cho trước nào

Hộp giới hạn (màu đỏ), ô Bản đồ nhiệt (màu xanh dương)

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

• Đặt kích thước ô hiển thị hình ảnh bao phủ toàn bộ khung nhìn ở mọi mức thu phóng đã cho; nên dùng: từ 256 đến 1024.

  Lưu ý quan trọng: Ô API vẫn ở độ phân giải 256x256 nhưng việc điều chỉnh hiển thị trực quan sẽ cho phép bạn tăng/giảm số lượng yêu cầu ô để bao phủ toàn bộ Khung nhìn của bản đồ

  (hãy đảm bảo công cụ này hoạt động với minZoom và maxZoom của Google Map, tức là: tilesize:1024 sẽ không tải các ô ở mức thu phóng 0 hoặc 1).

Khung nhìn có hình xếp kề 256x256 pixel so với 512x512 pixel

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

Mẹo: tinh chỉnh chế độ cài đặt hiển thị thẻ thông tin của lớp bằng monkeyrunnerStrategy:'no-overlap' thay vì "tốt nhất hiện có" để tránh xung đột hình ảnh giữa các thẻ thông tin.

Đọc giá trị pixel

Cảnh báo: Bạn có thể đọc và lưu vào bộ nhớ đệm trong 1 giờ (không phải vô thời hạn), các ô bản đồ nhiệt hoặc bất kỳ giá trị nào đọc được từ từng pixel riêng lẻ có trong ô API Chất lượng không khí hoặc API Phấn hoa. Tham khảo các điều khoản dành riêng cho API được nêu chi tiết trong phần "16 Air Quality API" để xác thực cấu hình triển khai của bạn

Để hiện giá trị tương ứng trên thang màu

Bạn có thể sử dụng thư viện Luma.gl và phương thức readPixelsToArray của thư viện này dựa trên sự kiện onClick được chỉ định làm giá trị cho lớp Deck.gl.

Giá trị pixel: rgba(128;0;0;255)

ÍT CAO

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

Kết luận

Bạn đã khám phá cách các điểm cuối API của ô API Chất lượng không khí và Pollen có thể:

• tải trên Google Maps trên web cũng phải đảm bảo tuân thủ Điều khoản sử dụng
• được tối ưu hoá cho phù hợp với trường hợp sử dụng của bạn
• đọc các giá trị ô

Hành động tiếp theo

Bạn nên đọc thêm:

• Nhận biết chất lượng không khí tại những Địa điểm bằng Air Quality API

Người đóng góp

Tác giả chính:

Thomas Anglaret | Kỹ sư giải pháp cho nền tảng Google Maps