이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

목표

공기질 및 Pollen API를 사용하면 특정 위치의 여행이나 지도에 대한 유용한 정보를 더 많이 확보할 수 있습니다. 이러한 API에서 제공되는 데이터를 소비하는 방법에는 텍스트 색인 생성 또는 히트맵 타일을 래스터 이미지로 사용하는 두 가지 방법이 있습니다.

alt_text

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

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
  ...
  })
  ]

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

경로상의 공기질 히트맵 타일

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에서는 타일이 로드되지 않습니다.)

256x256픽셀 및 512x512픽셀 타일이 있는 표시 영역

alt_text

    // 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)

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 지도에 로드되며 이용약관에 부합해야 합니다.
사용 사례에 맞게 최적화
카드 값 읽기

다음 작업

추가 추천 자료:

Air Quality API를 사용한 장소의 공기질 인식

참여자

수석 저자:

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