區域和路線的空氣品質和花粉指數

目標

空氣品質和 Pollen API 提供絕佳機會，可針對特定地點的行程或地圖提供更多 深入分析資料。您可以透過兩種方式使用這些 API 提供的資料：將索引當做文字，或將熱點圖區塊當做點陣圖。

alt_text

使用熱力圖圖塊 API 端點時，您可能會在載入個別光柵圖塊時遇到一些問題，例如：

  • 如何在網路上的 Google 地圖上載入圖塊？(並遵守 API 使用條款)
  • 如何管理體驗期間的要求數量？
  • 如何讀取圖塊值？

應用實例

您將看到範例用途，以便回答上述問題。

  • 空氣品質與花粉在某個區域：在一個或多個自訂多邊形內，以圖像呈現熱點圖圖塊 (目前的狀況) 的掃描資料。
  • 空氣品質和花粉沿路： 以熱圖圖塊 (目前的狀況) 呈現路線熱點的點陣圖資料。

實作

您將探索可用的資訊方塊，以及如何載入這些圖塊。您也會看到在將圖塊載入地圖上之情況下，該如何管理要求數量。最後，您將瞭解如何閱讀資訊方塊。

各類型可用的熱視圖圖塊

Air Quality API

- UAQI_RED_GREEN (UAQI，紅綠色調色盤)：通用空氣品質指數紅綠色調色盤。
- UAQI_INDIGO_PERSIAN (UAQI，靛藍波斯坦色版)：通用空氣品質指標靛藍波斯坦色版。
- PM25_INDIGO_PERSIAN：PM2.5 指數 indigo-persian 色版。
- GBR_DEFRA：每日空氣品質指數 (英國) 調色盤。
- DEU_UBA：德國當地空氣品質指數色彩配色方案。
- CAN_EC：加拿大空氣品質健康指數調色盤。
- FRA_ATMO：法國空氣品質指數調色盤。
- US_AQI：美國空氣品質指數色彩配色方案。

Pollen API

- TREE_UP：熱視圖類型代表樹狀索引圖。
- GRASS_UPI：熱圖類型會代表草地索引圖形地圖。
- WEED_UPI：熱圖類型會以圖形呈現雜草指數。

在網路上顯示熱視圖圖塊

載入圖塊並套用向量遮罩，只顯示地圖可視區域的所需區域。

正在載入資訊方塊

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 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，但您可以透過視覺顯示調整功能增加/減少圖塊要求數量，以涵蓋整個地圖可視區

    (請確認該功能支援 Google 地圖的 minZoom 和 maxZoom，也就是說，tilesize:1024 不會在縮放 0 或 1 時載入圖塊)。

使用 256x256 像素圖塊的可視區域，與使用 512x512 像素圖塊的可視區域

alt_text alt_text 



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

讀取像素值

如要在色階上顯示對應的值

您可以在將 onClick 事件指派為 deck.gl 圖層屬性時，使用 Luma.gl 程式庫及其 readPixelsToArray 方法。

像素值： 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 地圖網頁上載入，並確保符合使用條款
  • 根據用途進行最佳化
  • 讀取資訊方塊值

後續行動

建議延伸閱讀：

協作者

主要作者：

Thomas Anglaret | Google 地圖平台解決方案工程師