Chất lượng không khí và phấn hoa ở các khu vực và tuyến đường
Mục tiêu
API Chất lượng không khí và Bụi phấn hoa mang đến nhiều cơ hội để thêm nhiều thông tin chi tiết 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 thẻ thông tin bản đồ nhiệt dưới dạng hình ảnh đường quét.
Khi sử dụng các điểm cuối API thẻ thông tin nhiệt, bạn có thể gặp một số thách thức khi tải từng thẻ thông tin nhiệt đường quét, chẳng hạn như:
- cách tải thẻ thông tin trên Google Maps trên web? (cũng để tuân thủ Điều khoản sử dụng của API)
- cách quản lý số lượng yêu cầu trong trải nghiệm?
- làm cách nào để đọc giá trị của thẻ thông tin?
Các trường hợp sử dụng mẫu
Bạn sẽ được trình bày các trường hợp sử dụng mẫu để cố gắng 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á dữ liệu đường quét thẻ thông tin bản đồ nhiệt (điều kiện hiện tại) 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á dữ liệu đường quét thẻ thông tin bản đồ nhiệt (điều kiện hiện tại) được liên kết với các điểm trung gian trên tuyến đường.
Triển khai
Bạn sẽ khám phá những thẻ thông tin hiện có 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 thẻ thông tin được tải lên bản đồ. Cuối cùng, bạn sẽ được hướng dẫn cách đọc thẻ thông tin.
Thẻ thông tin nhiệt hiện có theo loại
Air Quality API
– 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í chung.
- UAQI_INDIGO_PERSIAN (UAQI, bảng màu indigo-persian): Bảng màu indigo-persian của Chỉ số chất lượng không khí (AQI) chung.
- PM25_INDIGO_PERSIAN: Bảng màu indigo-persian của chỉ số PM2.5.
– GBR_DEFRA: Bảng màu của 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í tại địa phương của Đức.
– CAN_EC: Bảng màu theo Chỉ số sức khoẻ theo chất lượng không khí của 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ỳ.
Pollen API
– TREE_UP: Loại biểu đồ nhiệt sẽ thể hiện bản đồ đồ hoạ chỉ mục cây.
– GRASS_UPI: Loại biểu đồ nhiệt sẽ thể hiện bản đồ đồ hoạ chỉ mục cỏ.
– WEED_UPI: Loại bản đồ nhiệt sẽ thể hiện chỉ mục cỏ dại dưới dạng bản đồ đồ hoạ.
Hiển thị thẻ thông tin 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 bản đồ.
Tải thẻ thông tin
- Sử dụng Maps JavaScript API để 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 TileLayer của deck.gl để tải thẻ thông tin Chất lượng không khí . Thao tác này sẽ hiển thị nhãn bản đồ cơ sở của Google Maps ở đầu ô bản đồ nhiệt (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 bất kỳ phần nào của thẻ thông tin biểu đồ nhiệt. Lưu ý quan trọng: Bạn cần thu thập dữ liệu sẽ được dùng để tạo mặt nạ vectơ áp dụng cho các thẻ thông tin trên bản đồ nhiệt.
- Trong một Khu vực:
sử dụng deck.gl GeoJson để tạo Mặt nạ trên Lớp Thẻ thông tin về Chất lượng không khí.
Ví dụ bên dưới sử dụng geojson đa đ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 về cách triển khai 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 ... }) ]
- Dọc theo một tuyến đường: Sử dụng deck.gl với TripsLayer để tạo Mặt nạ trên Air Quality TileLayer
Thẻ thông tin dạng 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ả thẻ thông tin đã tải vào bộ nhớ đệm trong bộ nhớ cục bộ (trong cùng một phiên), nhưng bạn có thể tối ưu hoá thêm:
- Hạn chế khu vực tải: tạo một hộp giới hạn (màu đỏ) và chỉ định hộp giới hạn đó cho lớp, chỉ các ô nhiệt đồ (màu xanh dương) bao phủ hộp giới hạn mới tải ở bất kỳ cấp độ thu phóng nào
Hộp giới hạn (màu đỏ), Thẻ thông tin 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 ở bất kỳ cấp độ thu phóng nào; nên dùng: từ 256 đến 1024.
Quan trọng: Thẻ thông tin API vẫn ở độ phân giải 256x256, nhưng việc điều chỉnh chế độ hiển thị hình ảnh sẽ cho phép bạn tăng/giảm số lượng yêu cầu thẻ thông tin để bao phủ toàn bộ Chế độ xem bản đồ
(đảm bảo rằng nó hoạt động với minZoom và maxZoom của Google Maps, tức là:
tilesize:1024
sẽ không tải thẻ thông tin ở mức thu phóng 0 hoặc 1).
Khung nhìn có ô 256x256 pixel so với 512x512 pixel
// Heatmap Tile layer new TileLayer({ id: 'heatmap-tiles', tilesize:256, // <-- change to 512 for instance ... })
Đọc giá trị pixel
Để hiển thị 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 khi một sự kiện onClick được chỉ định làm thuộc tính cho lớp deck.gl.
Giá trị pixel: rgba(128,0,0,255)
THẤP
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 thẻ thông tin dạng ô nhiệt đồ Chất lượng không khí và Bụi phấn hoa có thể:
- được tải trên Google Maps trên web, đồng thời đảm bảo tuân thủ Điều khoản sử dụng
- được tối ưu hoá để phù hợp với trường hợp sử dụng của bạn
- đọc giá trị của thẻ thông tin
Hành động tiếp theo
Bạn nên đọc thêm:
Người đóng góp
Tác giả chính:
Thomas Anglaret | Kỹ sư giải pháp Nền tảng Google Maps