구글 지도 플랫폼과 deck.gl을통한고성능데이터시각화

지난 5, 구글맵의 엔지니어링 담당자 Travis McPahil Google I/O에서 구글 지도 플랫폼의 성능과 확장성에 대한 강연을 통해 deck.gl 대한 Maps JavaScript API 지원을 발표했습니다. 발표 이후, 세계의 개발자들과 deck.gl 가능성과 deck.gl 상의 지도에 무엇을 가져다 있는지에 대해 이야기를 나누었고, 열광적인 반응을 얻을 있었습니다. 이번 포스팅에서 deck.gl에 대해 자세히 설명해 드리겠습니다.

 

deck.gl이란?

vis.gl 프레임워크 제품군의 일부인 deck.gl은 웹에 다양한 고성능의 아름다운 데이터 시각화를 제공하는 오픈 소스 프레임워크입니다. 다음은 deck.gl 문서에서 제공하는 프레임워크에 대한 간단한 요약입니다.

  • 대용량 데이터 세트 및 고성능 업데이트를 처리
  • 선택과 같은 대화형 이벤트 처리
  • 지도 투영 및 기본 지도와의 통합
  • 테스트를 거쳐 검증된 레이어
  • 쉬운 새 레이어 생성 및 기존 레이어 편집

 

deck.gl인가요?

많은 웹 개발자가 데이터를 시각화할 때 직면하는 문제 중 하나는 매우 큰 데이터셋을 렌더링하는 방법입니다. 개발자들은 수백 개의 데이터 포인트가 아니라, 수만 개 또는 수십만 개, 심지어 수백만 개를 렌더링 할 때도 있다고 합니다.

JavaScript는 단일 스레드 이벤트 루프 모델이기 때문에 대량의 데이터를 처리하고 3D 그래픽을 렌더링하는 데 필요한 헤비 컴퓨팅 종류에는 일반적으로 적합하지 않습니다. 이를 극복하기 위해 deck.gl은 사용자의 컴퓨터에서 GPU에 비동기적으로 액세스할 수 있는 WebGL 라이브러리를 사용합니다. 간단히 말해, 이는 모든 무거운 리프팅이 브라우저에서 벗어나 이러한 유형의 작업에 더 적합한 하드웨어로 이동된다는 것을 의미합니다. 그 결과 수백만 개의 데이터 포인트를 빠르게 시각화할 수 있습니다

 

deck.gl 어떻게 작동하나요?

deck.gl Maps JavaScript API에서 제공하는 OverlayView를 활용하여 시각화를 지도 상단에 레이어로 렌더링합니다. 이렇게 하면 사용자가 검색 및 확대/축소하는 동안에도 기본 맵과 deck.gl 시각화 계층을 자동으로 동기화할 수 있으므로 사용자에게 익숙한 완전한 대화형 맵 환경을 제공할 수 있습니다.

deck.gl의 계층 기반 접근 방식을 사용하면 지도 위에 여러 시각화를 추가하여 복합적인 효과를 만들 수도 있습니다. 다음은 두 개의 데이터 세트를 별도의 산점도 레이어(Scatterplot Layer)로 렌더링하여 단일 시각화를 생성하는 작업 사례입니다.

 

 

deck.gl은 또한 계층 속성 및 데이터의 변경 사항을 기반으로 시각화를 빠르게 업데이트할 수 있는 반응형 프로그래밍 모델을 사용합니다. 이는 애니메이션 데이터도 볼 수 있음을 뜻합니다! 다음은 지도 JavaScript API 경로 서비스에서 반환한 경로의 예이며, deck.gl Trip Layer를 사용하여 애니메이션합니다.

 

 

어떻게 시작하나요?

deck.gl을 활용한 Maps JavaScript API의 샘플을 보시려면 예제 deck.gl 설명서를 확인하여 프레임워크를 숙지합니다. 또한 GitHub에서 예제 앱의 소스와 개별 계층에 대한 별도의 독립 실행형 예제를 찾을 수 있습니다. deck.gl 팀은 또한 여기에서 일반적인 성능 기대치와 최적화 기술에 대한 훌륭한 글을 보실 수 있습니다.

 

원문: https://cloud.google.com/blog/products/maps-platform/high-performance-data-visualizations-google-maps-platform-and-deckgl

 

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