개요 🔗

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

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

Heat Map 🔗

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

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

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

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

1. Heatmap Layer 구성하기 🔗

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

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

0
const 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으로 감싸주기만 하면 된다.

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

예제 확인하기 🔗

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