このページは Cloud Translation API によって翻訳されました。

エリアとルートの大気質と花粉

目的

Air Quality API と Pollen API は、任意の地点の移動や地図について、より多くの 分析情報を追加できる絶好の機会です。これらの API から利用可能なデータを利用する方法は 2 つあります。テキストとしてインデックス登録する方法と、ヒートマップタイルをラスター画像として使用する方法です。

alt_text

ヒートマップタイル API エンドポイントの使用中に、個々のラスタータイルを読み込む際に次のような課題に直面することがあります。

ウェブ上の Google マップにタイルを読み込むには？（API の利用規約にも準拠する必要があります）
エクスペリエンス中のリクエスト数の管理方法は？
タイルの値を読み取る方法

サンプルのユースケース

上記の質問に答えるためのサンプルユースケースが示されます。

大気質とエリア内の花粉:1 つまたは複数のカスタムポリゴン内のヒートマップタイル（現在の状況）のラスターデータを可視化します。
大気質と経路上の花粉: ルートの地点にマッピングされたヒートマップタイル（現在の状況）のラスターデータを可視化します。

実装

利用可能なタイルと、ウェブエクスペリエンスで読み込む方法を確認します。また、タイルがマップに読み込まれるシナリオで、リクエスト数を管理する方法についても説明します。最後に、タイルの読み方を説明します。

タイプ別の使用可能なヒートマップタイル

Air Quality API

- UAQI_RED_GREEN（UAQI、赤緑パレット）: ユニバーサル大気質指数の赤緑パレット。
- UAQI_INDIGO_PERSIAN（UAQI、インディゴペルシャパレット）: ユニバーサル大気質指数のインディゴペルシャパレット。
- 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 を使用して、Air Quality TileLayer 上にマスクを作成します。

alt_text

以下の例では、フランスのマルチポリゴン 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 上に マスクを作成します。

ルート上の大気質ヒートマップタイル

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 ～ 1,024
重要: API タイルの解像度は 256x256 のままですが、視覚的な表示を調整することで、マップのビューポート全体を覆うようにタイルリクエストの数を増減できます。

（Google マップの minZoom および maxZoom で動作することを確認してください。つまり、tilesize:1024 はズーム 0 または 1 ではタイルを読み込まません）。

タイルの 256 x 256 ピクセルと 512 x 512 ピクセルのビューポート

alt_text

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

ピクセル値を読み取る

<ph type="x-smartling-placeholder">で確認できます。

対応する値をカラースケールで表示する

deck.gl レイヤに prop として割り当てられた onClick イベントが発生すると、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 Maps Platform ソリューションエンジニア

エリアとルートの大気質と花粉

目的

サンプルのユースケース

実装

タイプ別の使用可能なヒートマップ タイル

Air Quality API

Pollen API

ウェブでヒートマップ タイルを表示する

タイルの読み込み

ベクターマスクの適用

API リクエストと費用を管理する

ピクセル値を読み取る

対応する値をカラースケールで表示する

まとめ

次のアクション

寄与者

タイプ別の使用可能なヒートマップタイル

ウェブでヒートマップタイルを表示する