logo

𝝅번째 알파카의 개발 낙서장

screen

OpenLayers를 여행하는 개발자를 위한 안내서 - 24. Heat Map 표현하기

projects

GIS

시리즈 톺아보기

OpenLayers를 여행하는 개발자를 위한 안내서

OpenLayers를 여행하는 개발자를 위한 안내서
count

개요 🔗

데이터는 보는 관점에 따라, 전혀 새로운 결과를 도출하기도 한다. 지금까지 다뤘던 지도들은 하나같이 데이터를 지도 상에 있는 그대로 보여주는 것에 중점을 뒀었다.

이번 장에서는 Heat Map을 통해, 데이터를 바라보는 관점을 조금 바꿔본다.




Heat Map 🔗

Heat Map은 데이터의 분포도를 중점적으로 나타내는 지도다. 데이터들의 분포도, 갯수 등을 계산하여 시각화한다.

image

영화 같은 매체에서 한 번쯤 봤을 것이다. 통상 재난(특히 질병)의 분포나 규모를 파악하는 데 주로 쓰인다.

이 처럼 Heat Map은 데이터의 분포를 제공하기 때문에, 데이터의 흐름을 파악하는 데 매우 용이하다. 즉, 나무가 아닌 숲에 관점을 두는 것이다.


데이터는 마찬가지로 스타벅스 위치 데이터를 사용한다.



1. Heatmap Layer 구성하기 🔗

WFS 지도 생성 방법은 15장을 확인하자.

WFS 지도를 생성하는 과정에서 원본 데이터를 관리하는 VectorSource를 생성하게 되며, 과정은 아래와 같다.

TYPESCRIPT

0const wfs = new VectorSource({
1 format: new GeoJSON(),
2 url: (extent) => urlBuilder('https://example.com/geoserver/wfs', {
3 service: 'WFS',
4 version: '2.0.0',
5 request: 'GetFeature',
6 typename: 'test:building',
7 srsName: 'EPSG:3857',
8 outputFormat: 'application/json',
9 exceptions: 'application/json',
10 bbox: `${extent.join(',')},EPSG:3857`
11 }),
12 strategy: bbox
13});

Heat Map을 만드는 것 또한, Cluster Map을 만드는 것과 유사하게 사용하는 객체만 조금 바꿔서 사용해주면 된다.

Source 객체 중 하나였던 Cluster와 달리, Heatmap 객체는 Layer 객체 중 하나다. 즉, VectorSource는 그대로 사용하되, 이를 감싸는 레이어를 VectorLayer가 아닌 Heatmap으로 감싸주기만 하면 된다.

Name Type Default Description
className string ol-layer 클래스명
opacity number 1 투명도 (0 ~ 1)
visible boolean true 표시 여부
extent ol/extent-Extent | undefined 레이어의 렌더링 범위. 해당 범위를 넘어가면 데이터를 표시하지 않음
zIndex number | undefined 우선 순위 (높을수록 위에 표시)
minResolution number | undefined 최소 표시 해상도
maxResolution number | undefined 최대 표시 해상도
minZoom number | undefined 최소 표시 줌 레벨
maxZoom number | undefined 최대 표시 줌 레벨
gradient Array<string> [ '#00f', '#0ff', '#0f0', '#ff0', '#f00' ] 히트맵 표현에 사용되는 색상 배열
radius number 8 히트맵 반지름
blur number 15 히트맵 블러
weight string | function weight 가중치
source (ol/source/Vector-VectorSource | ol/source/VectorTile-VectorTile) | undefined 레이어의 소스
properties object | undefined 임의 속성. get(), set()으로 조작 가능

Heatmap에 대한 전체 정보는 공식 문서에서 확인할 수 있다.




예제 확인하기 🔗

image

OpenLayers6 Sandbox - Heat Map에서 이를 구현한 예제를 확인할 수 있다.