위의 지도는 2D일까요? 3D일까요?

많은 분들이 3D 지도라고 생각하셨을 텐데요, 놀랍게도 2D 지도입니다. 이 지도는 Google maps에 deck.gl이라는 데이터 시각화를 제공하는 오픈 소스 프레임 워크를 접목시킨 지도인데요!

Google maps platform은 2019년부터 deck.gl에 대한 Maps JavaScript API의 래스터 베이스맵을 지원했습니다. SPH에서도 ‘구글 지도 플랫폼과 deck.gl을 통한 고성능 데이터 시각화‘라는 포스팅으로 소개드린 적이 있었는데요!

deck.gl은 대규모 데이터 세트를 위한 WebGL 기반의 시각화 프레임 워크로, Google Maps와 함께 사용한다면 데이터를 시각화하여 Google Maps에 나타낼 수 있고, 나아가 반응형 프로그래밍 모델을 사용하면 애니메이션 데이터도 볼 수 있습니다. 

 2021년, Google Maps과 deck.gl의 만남으로 우리는 새로운 지도를 만나게 되었습니다. 기존엔 래스터 베이스맵 형식의 2D 지도였지만, 이번에 발전된 deck.gl은 인터리브 방식의 벡터 베이스맵에 대한 지원을 추가했습니다. 즉, deck.gl을 사용하면 이제 Google의 벡터 맵을 데이터 레이어와 혼합하여 레이블, 3D 및 기타 콘텐츠의 특징을 살려 렌더링 할 수 있고, 완벽한 픽셀 구성을 제공할 수 있다는 것을 의미합니다. 더불어, 지도에 렌더링 되는 deck.gl의 시각화가 아닌 지도의 일부로서 렌더링 되어 시각화의 성능과 유연성을 향상시킨 지도를 경험할 수 있습니다.

deck.gl과의 만남으로 3차원 지도를 선보이는 Google Maps, 이전의 2D 지도와 발전된 3D 지도를 비교해 보도록 하겠습니다.

deck.gl+Google map의 새로운 기능

글로 읽어서는 감이 오지 않으실 것 같아 직접 지도를 만져보실 수 있도록 준비했습니다.

예전과 달라진 모습을 네 가지의 Layer를 보면서 자세히 알아봅시다!

1) Arc Layer

Arc Layer는 ‘호’라는 단어 그대로, 두 개의 타겟에 활모양을 그리며 포인트를 이어 줍니다. 이 레이어는 출발지/목적지가 나타나는 비행기 항로와 같은 OD(Origin Destination) data, 인구 이동 등을 효과적으로 나타낼 수 있습니다.

아래의 지도를 통해 직접 지도를 움직이고 확대/축소해 볼 수 있습니다. (Ctrl 키를 눌러 확대를 해주세요!)

아래의 두 번째 지도는 shift 키를 눌러 지도의 기울기를 조절하며 데이터들을 볼 수 있습니다.

<Old Ver.>

<8.6 Ver.>

2) Scatter plot Layer

Scatter plot, 즉 산점도 레이어는 쌍으로 구성된 위도 및 경도 조정 점을 가져와서 특정 반지름을 가진 원으로 렌더링합니다. 이 레이어는 인구 밀집 등에 나타낼 수 있으며, 나아가 Geomarketing에서 활용할 수 있습니다.

아래의 예시는 맨하탄의 지역의 남녀 거주 성비를 보여주는데요.

이때 위의 지도를 보고 “에이 그냥 지도에 기울기 기능 추가 하면 되는 거 아냐?! ” 라고 생각하실 수도 있지만! 이전 버전과 현재 버전의 큰 차이가 있습니다. (shift를 꾸욱 누르고 움직여 보세요!)

 <Old Ver.>

데이터가 맞춰지지 않고, 이리저리 따로 움직이는 모습을 볼 수 있습니다. 벡터맵이 지원되지 않는 이전의 버전에서는 데이터 레이어와 다른 레이어가 렌더링되지 못하여 기울이기를 적용할 수 없는 것을 알 수 있습니다. 하지만 현재 발전된 지도에서는 그런 문제가 없다는 것을 확인하실 수 있습니다.

 

3) Trips Layer

Trips Layer은 차량의 움직임을 애니메이션 경로를 렌더링하여 보여줍니다. 실시간 교통량 데이터나 차량의 OD data를 보여주기 좋은 레이어죠!

평면적으로만 보이는 이전의 지도와 새롭게 출시된 지도를  한눈에 비교해 볼까요?

<Old Ver.>

<8.6 Ver.>

2021년 버전의 지도에서 뉴욕의 건물 사이로 차량의 움직임이 일어나는 것을 볼 수 있는데요.

3D 지원으로 인해 이전에 보이지 않던 건물의 높이와 데이터의 움직임을 모두 볼 수 있는 것을 바로  파악할 수 있습니다.

 

4) Hexagon Layer

Hexagon Layer는 입력된 정보 배열을 기반으로 육각형 지도를 렌더링합니다. 이것은 육각형의 반경의 데이터를 집계하여 색상과 높이로 나타납니다.

이처럼 통계 시각화를 나타내어 다양한 곳에 활용될 수 있는 Layer 중 하나입니다.
아래의 지도에서도 Trips Layer에서 건물들의 높이를 알 수 있는 것처럼 육각형의 높이 또한 볼 수 있습니다.

<Old Ver.>

<8.6 Ver.>

색상만으로 데이터를 밀집도를 확인했던 이전 지도와 달리 높이를 통해서도 데이터의 차이를 쉽게 알 수 있습니다.

 

이렇게 네 가지의 레이어를 비교하여 3차원으로 구현된 지도를 직접 만져보며 확인하실 수 있었는데요!

그럼 이제 새로운 버전의 deck.gl과 Google maps를 어떻게 적용하는지 알아보겠습니다.

 

• 지도 설정

우선 사용하고 있는 Google maps를 벡터 베이스맵으로 설정해야 합니다.

Google Cloud Platform 의 Google Maps Platform의 지도 관리에서 새로운 지도를 생성하거나, 기존의 지도를 수정할 때 벡터맵에 체크하고 기울이기를 클릭하면 맵 설정은 끝납니다. 간단하죠?

• code  설정

deck.gl 버전은 다음과 같습니다.

<script src="https://unpkg.com/deck.gl@8.6.0/dist.min.js"></script>
or
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

가장 최근 출시된  8.6버전부터 벡터맵 지원이 가능하기 때문에 가장 최신 버전의 deck.gl 또는 8.6버전으로 설정해야 합니다.
코드 내부는 어떻게 설정해야 하는지 Scatter plot Layer를 예시로 아래 살펴볼까요?

  const SCATTERPLOT_LAYERS = [
        new deck.ScatterplotLayer({
            id: 'scatter-plot',
            data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json',
            radiusScale: radius,
            radiusMinPixels: 0.25,
            getPosition: d => [d[0], d[1], 0],
            getFillColor: d => (d[2] === 1 ? MALE_COLOR : FEMALE_COLOR),
            getRadius: 1,
            updateTriggers: {
                getFillColor: [MALE_COLOR, FEMALE_COLOR]
            }
        })
    ];

    const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 40.760306, lng: -73.982302 },
        zoom: 13,
        heading: 320,
        mapId: "베이스맵ID",
    });

    const overlay = new deck.GoogleMapsOverlay({
        layers: SCATTERPLOT_LAYERS
    });
    overlay.setMap(map);

 

위에서 생성한 지도 아이디를 “베이스 맵 ID”에 삽입을 한 뒤,

사용하기를 원하는 deck.gl의 Layer 와 Overlay를 생성할 때 기존의 코드에서  deck.만 붙이면 완성입니다. 아주 간단하죠?

 

이번 포스팅은 SPH의 Google Maps Technical Support Team의 최정연씨가 함께해주었는데요.

정연씨 이번 프로젝트 어땠나요 ☺️⁉️

이처럼 간단한 설정 변경으로  3D 지도를 경험할 수 있으니 꼭 한 번 활용해 보시길 추천드립니다.

 

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 케이스에 존재하는 다양한 제품군을 보유하고 있는 고객의 사례에 꼭 맞는  무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 각 케이스에 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며,  SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다. 감사합니다.

 

더 알고싶은 정보가 있으실까요? 

피드백을 주시면 다음 포스팅에 반영할 수 있도록 하겠습니다. 😀

Powered by Froala Editor

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다