各區域和路線的空氣品質和汙染物
目標
空氣品質和 Pollen API 提供絕佳機會，可針對特定地點的行程或地圖提供更多 深入分析資料。您可以透過兩種方式使用這些 API 提供的資料：以文字形式建立索引，或是以光柵圖片的形式建立索引。
使用熱視圖資訊方塊 API 端點時，您在載入個別光柵圖塊時可能會遇到一些挑戰，例如：
- 如何在網頁的 Google 地圖上載入圖塊？(也需要遵守 API 的《使用條款》)
- 如何在體驗期間管理要求數量？
- 如何讀取圖塊值？
應用實例
您會看到回答上述問題的應用實例。
- 空氣品質與某區域的花粉：在一或多個自訂多邊形內，以視覺化方式呈現熱視圖圖塊 (目前情況) 的光柵資料。
- 空氣品質與花粉的長途路線： 以視覺化方式呈現路線控點上映射的熱視圖圖塊 (目前情況) 光柵資料。
導入作業
您將探索可用的資訊方塊，以及如何載入這些圖塊。您也會看到在將圖塊載入地圖上之情況下，該如何管理要求數量。最後，您將示範如何閱讀資訊方塊。
各類型可用的熱視圖圖塊
Air Quality API
- UAQI_RED_GREEN (UAQI，紅綠調色)：通用空氣品質指數紅綠調色盤。
- UAQI_INDIGO_PERSIAN (UAQI，Indigo-persian 調色盤)：通用空氣品質指數 (以靛藍色) 調色盤。
- 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 程式庫，準備載入光柵圖塊圖片。
- 使用 deck.gl TileLayer 載入空氣品質 熱視圖圖塊。這可讓 Google 地圖在熱視圖圖塊上方顯示基本地圖標籤 (與 Maps JavaScript 自訂疊加層不同)
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，在空氣品質動態磚圖層上建立 Mask。
下方範例使用法國的多重多邊形 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，在空氣品質動態磚圖層上建立 遮罩
行程期間的空氣品質熱視圖圖塊
管理 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 至 1024 之間
重要：API 圖塊仍是 256x256 的解析度，但視覺顯示調整功能可讓您增加/減少要涵蓋整個地圖可視區域的地圖方塊要求數量
(請確認該功能支援 Google 地圖的 minZoom 和 maxZoom，也就是說，
tilesize:1024不會在縮放 0 或 1 時載入圖塊)。
含有圖塊 256x256 像素與 512x512 像素的可視區域
// Heatmap Tile layer
new TileLayer({
id: 'heatmap-tiles',
tilesize:256, // <-- change to 512 for instance
...
})
讀取像素值
以色階顯示對應值
您可以在指派為 deck.gl 圖層的 onClick 事件上使用 Luma.gl 程式庫及其 readPixelsToArray 方法。
像素值： 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);
}
}
})
結論
您已瞭解 Air Quality 和 Pollen 熱視圖 API 端點有以下可能：
- 載入網頁 Google 地圖時，請務必遵守《使用條款》
- 能滿足您的用途
- 讀取圖塊值
後續行動
建議延伸閱讀：
著作人
主要作者：
湯瑪斯安格拉特 |Google 地圖平台解決方案工程師