지역 및 경로의 공기질 및 꽃가루

목표

Air Quality 및 Pollen API는 특정 위치의 경로 또는 지도에 더 많은 유용한 정보를 추가할 수 있는 좋은 기회를 제공합니다. 이러한 API에서 제공되는 데이터를 사용하는 방법에는 두 가지가 있습니다. 텍스트로 색인화하거나 히트맵 타일을 래스터 이미지로 표시하는 것입니다.

히트맵 타일 API 엔드포인트를 사용하는 동안 개별 래스터 타일을 로드하는 동안 다음과 같은 몇 가지 문제가 발생할 수 있습니다.

• 웹의 Google 지도에 타일을 로드하는 방법 (API 이용약관도 준수해야 함)
• 환경에서 요청 수를 관리하는 방법
• 타일 값을 읽는 방법

샘플 사용 사례

위 질문에 답할 수 있는 샘플 사용 사례가 제시됩니다.

• 지역의 공기질 및 꽃가루: 하나 이상의 맞춤 다각형 내에서 열지도 타일 (현재 상태) 래스터 데이터를 시각화합니다.
• 경로의 공기질 및 꽃가루: 경로 웨이포인트에 매핑된 히트맵 타일 (현재 상태) 래스터 데이터를 시각화합니다.

구현

사용 가능한 타일과 웹 환경에서 이러한 타일을 로드하는 방법을 알아볼 수 있습니다. 또한 지도에 카드가 로드되는 시나리오에서 요청 수를 관리하기 위해 취할 수 있는 조치를 확인할 수 있습니다. 마지막으로 카드를 읽는 방법이 표시됩니다.

사용 가능한 열지도 타일 유형

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를 사용하여 공기질 히트맵 타일을 로드합니다. 이렇게 하면 Maps JavaScript 맞춤 오버레이와 달리 히트맵 타일 위에 Google 지도 기본 지도 라벨이 표시됩니다.

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을 사용하여 대기질 타일 레이어에 마스크를 생성합니다.

아래 예에서는 프랑스의 다중 다각형 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
  ...
  })
  ]

• 경로 따라: TripsLayer와 함께 deck.gl을 사용하여 대기질 타일 레이어에 마스크를 만듭니다.

경로에 대한 공기질 히트맵 타일

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~1,024.

  중요: 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
        ...
    })

도움말: '최적의' 대신 refinementStrategy:'no-overlap'을 사용하여 레이어 타일 렌더링 설정을 미세 조정하여 타일 간의 시각적 충돌을 방지합니다.

픽셀 값 읽기

주의: 일시적으로 (무기한이 아님) 1시간 동안 열지도 타일 또는 공기질 또는 꽃가루 API 타일에 포함된 개별 픽셀에서 읽은 값을 읽고 캐시할 수 있습니다. 구현을 검증하려면 '16 Air Quality API' 섹션에 자세히 설명된 API별 약관을 참고하세요.

색상 스케일에 해당 값 표시

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

결론

대기질 및 꽃가루 히트맵 타일 API 엔드포인트를 다음과 같이 사용할 수 있는 방법을 알아봤습니다.

• 웹의 Google 지도에 로드되며 서비스 약관을 준수해야 합니다.
• 사용 사례에 맞게 최적화됨
• 카드 값 읽기

다음 작업

추가 추천 자료:

• Air Quality API를 사용한 Places의 공기질 인식

참여자

주요 저자:

토마스 앙글라레트 | Google Maps Platform 솔루션 엔지니어