ArcGIS API for JavaScript를 활용한 Voxel Layer 시각화 하기

ArcGIS 2.9가 새롭게 발표되면서 Voxel Layer를 ArcGIS Online과 Enterprise Portal 10.9.1을 활용하여 웹에서 공유할 수 있게 되었습니다. Voxel Layer는 대기질, 지하 지질 모델, 수온 등을 시각화하여 주변 공간 정보와 비교하기에 적합합니다.

Voxel 레이어를 웹에 발행하면 Voxel scene layer package(SLPKs) 가 생성되고 JavaScript 응용 프로그램용 커스텀 ArcGIS API를 활용하여 시각화된 3D 데이터를 공유할 수 있습니다. 아직까지는 베타 버전이기 때문에 웹에서는 시각화만 가능합니다.

기존에 ArcGIS Pro에서 드론으로 측정한 대기질 정보를 Voxel Layer로 나타낸 방법에 대해서는 아래의 한국지비에스 블로그 포스팅을 통해 확인할 수 있습니다.

이 글에서는 Voxel Layer를 웹에 발행하여 활용하는 방법을 자세히 알아보도록 하겠습니다.

ArcGIS Pro에서 생성한 미세먼지 측정 보간 Voxel Layer를 웹에서 공유하기 위해 AGOL에 발행하면 다음과 같은 API 가 생성됩니다.

AGOL에 발행된 Voxel Layer API

이 피처레이어를 ArcGIS API for JavaScript로 시각화하기 위해서 VoxelLayer 모듈을 스크립트에 로드(load)하고 url을 받아주는 변수를 생성합니다.

‘VoxelLayer’ 모듈 Script에 load

공간정보를 시각화 할 때는 좌표계(spatial reference)가 매우 중요한 요소로 Web Scene에 Voxel Layer를 발행할 때 이 샘플은 WKID 4326으로 발행되었습니다. 정확한 좌표계로 레이어를 발행한 후 property도 스크립트에 지정해주어야 Web Scene에 나타납니다.

Voxel Layer 변수를 WebScene의 layers에 추가
Voxel Layer는 Sceneview의 viewingMode property를 “local”로 지정해 주어야 한다.

지금까지 ArcGIS API for JavaScript를 통해 ArcGIS의 새로운 공간정보 표출 방식을 웹상으로 공유하고 시각화하여 효과적으로 공간 정보를 나타낼 수 있는 방법을 알아보았습니다.

아래 지도를 클릭하면 드론으로 측정된 대기질 정보를 ArcGIS Pro에서 보간법으로 분석한 상층부의 대기질을 3D로 확인할 수 있습니다. Esri에서는 지속적으로 Voxel Layer에서 상세 정보를 팝업을 통해 확인하는 등의 기능을 추가할 예정에 있습니다. 해당 기술을 통해 공간정보를 3D로 분석하여 해수면 상승, 지구 온난화 등에 효과적으로 대비할 수 있기를 기대합니다.

위 이미지를 클릭하면 해당 지도로 이동합니다.

 

KBS 재난방송센터 재난현황판 2021년 개선 (Experience Builder/대시보드)

한국지비에스(GBS Korea)는 2020년 KBS 재난미디어센터에 ArcGIS를 도입 및 콘텐츠를 구축하고 실시간으로 재난 정보를 전달하며 시청자들에게 GIS에 대해 더 알리는 계기가 되었습니다. 2021년에 한국지비에스(GBS Korea)에서는 2020년도 1차 사업에 이어 GIS 콘텐츠의 고도화를 진행하였습니다.

2021년 재난현황판 고도화를 위해 ArcGIS Enterprise의 어떤 기능들이 활용되었는지 살펴보도록 하겠습니다. 현황판은 클라이언트 요청을 구현하기 위하여 일부 위젯을 개발하여 사용하기도 하였지만 유지관리의 용이성을 위하여 기존 Experience Builder 앱(이하: ExB)와 Dashboard에 내장된 위젯을 주로 사용하였습니다.

2020년 도입된 재난현황판 태풍 대시보드 화면
2020년 도입된 재난현황판의 미세먼지 대시보드 화면

Experience Builder (ExB)

ArcGIS Enterprise 10.8.1의 ExB은 캐시 속도가 빠르고 여러 가지 위젯을 손쉽게 연결해줄 수 있는 장점이 있지만 비교적 최근에 출시되어 내부에 포함된 위젯이 아직은 제한적입니다. 그러나 ExB의 빠른 화면 전환과 여러 페이지를 조합할 수 있는 기능 때문에 여러 대시보드 앱을 만들고 하나의 ExB에 embed 하여 현황판을 표시하였습니다. ArcGIS Enterprise 10.9부터는 ExB에 여러 기능이 추가가 되어 대시보드 없이 구현이 더욱 용이해질 것으로 기대됩니다.

하나의 ExB에 여러 대시보드를 담기 위해서는 섹션(Section) 위젯을 이용하여 뷰(View) 혹은 페이지(Page)를 여러 개 추가하는 방법이 있습니다. 2021년 현황판 고도화를 진행하면서 KBS에서는 페이지를 추가하여 화면을 구성하였는데 뷰와 페이지의 장단점에 대해 간략히 살펴보겠습니다.

  • : 페이지 전체가 아닌 해당 페이지 안의 섹션만 새로고침을 하기 때문에 더 빠른 앱 성능을 제공합니다. 또한 뷰 탐색 위젯을 하나만 사용하기 때문에 ExB의 디자인 변경이 필요할 때 수정해야 할 항목이 섹션과 뷰 탐색 위젯 두 개여서 수정이 용이합니다. 하지만 ArcGIS Portal이 아닌 외부 URL로 해당 ExB에 접근이 필요할 경우 각 뷰마다 로그인 정보가 요청됩니다.
  • 페이지: 여러 페이지를 추가하여 페이지 간 이동할 시 뷰보다는 초기 로딩에 1~3초 정도 소요되지만 초기 로딩 이후에는 신속한 화면 전환이 이루어 집니다. 페이지는 ExB 랜딩페이지 로그인을 하면 추가 로그인 요청이 없다는 점에서 UX가 편리합니다. 2021년 사업 고도화 진행 시 내부 여러 부서에서 접근이 용이하도록 로그인 편의성 개선에 중점을 두었기에 페이지로 현황판을 구성하였습니다.

ArcGIS 대시보드 (HTML/Arcade)

2021년 프로젝트 디자인 팀과 협업을 통해 각 재난별로 통일된 디자인을 반영하였습니다. 그러나 ArcGIS Enterprise 10.8.1의 ExB나 기본 대시보드 하나만으로는 표현하기 어려운 요소들이 있었습니다. 한국지비에스는 대시보드 텍스트 에디터에서 제공하는 기본 HTML을 이용하여 디자인 가이드를 반영하여 대시보드를 구축하였습니다. 아래는 2021년 ArcGIS Online(AGOL)에서 제공하는 Arcade도 추가 활용하여 디자인 표현을 반영한 대시보드이며 ArcGIS Enterprise에서도 HTML을 사용하여 유사하게 구현할 수 있습니다.

2021년 ArcGIS Online에 구현된 태풍 대시보드
2021년 ArcGIS Online에 구현된 미세먼지 대시보드

위의 태풍과 미세먼지 대시보드에 동일하게 적용된 HTML은

  • 각 위젯의 제목 부분 HTML 적용(폰트, 색상 통일)
  • 디자인 가이드 반영을 위한 범례 텍스트 HTML 지정

으로 전체 디자인과 레이아웃의 통일성을 위해 세부적으로 HTML을 사용하였습니다.

현재 태풍 예상 경로 리스트 위젯 모음

특히 태풍 대시보드의 태풍 경로 리스트 위젯에서 현재 태풍의 위치를 강조하기 위하여 해당 위젯에서 제공하는 텍스트 편집 툴을 다용하여 다음과 같이 적용하였습니다.

  • <div style = position: absolute > </div> : div 태그의 내용 위치 고정
    • 빨간 상자와 내용을 각각 두개의 div 태그에 나누고 style에 position:absolute로 하여 해당 정보를 강조합니다.
  • <p style= text-indent:-1.7em padding-left:1.7em > </p>: 해당 p 태그의 내용이 두줄 이상으로 표시 될 경우 두 번째 줄 시작점을 들여 씀
    • 내용 텍스트의 각 줄을 p 태그로 감싸주고 style에 text-indent와 padding-left를 작성하면 텍스트 블럭의 좌측정렬을 자동화할 수 있습니다.
  • <img src={url} /> : url의 이미지를 텍스트란에 표시
    • 아이콘 등을 표시하기 위해 작성되었으며, 이미지 path url을 지정하면 해당 이미지가 텍스트 박스에 표기 됩니다.
최근 발생 태풍 위젯

KBS 재난현황판의 경우 실시간으로 데이터를 변환하여 재난정보를 표출하기 때문에 고정된 값을 표출하지 않습니다. 그래서 보기 쉽고 정돈된 리스트로 나타내기 위하여 다음과 같은 HTML을 사용하였습니다.

  • <div style= display: grid > </div>: div 태그 내부의 태그를 테이블 형식으로 표출
    • div 태그의 style에 display: grid 를 작성하면 테이블 형식으로 표현이 되며 grid-template-columns 프로퍼티를 이용하여 테이블 열의 개수와 넓이를 조정할 수 있습니다.
  • <p> </p> : display: grid를 생성할 때 빈 <p> 태그를 생성하여 빈칸 표시. 각 태그마다 기본 설정과 다른 색상과 폰트 지정 가능
    • 빈 <p>태그를 작성하여 텍스트 간의 정렬을 맞추고 날짜 텍스트의 <p> 태그에 폰트 크기와 색상을 지정하여 텍스트별 위계를 나타낼 수 있습니다.
미세먼지 지점별 PM2.5 농도 리스트 위젯

Enterprise 10.8.1에서는 Arcade 기능이 제공되지 않아 농도별 텍스트의 색상을 강조 하는 대신 농도에 따른 심볼과 색상을 보여주는 것으로 대체하였지만 AGOL에 적용된 미세먼지 대시보드의 “지점별 PM2.5 농도” 위젯은 Arcade를 사용하여 조금 더 직관적인 표현을 추가하였습니다.

미세먼지 리스트 위젯의 HTML은 태풍 리스트 위젯과 유사하게
– 두 개의 <div> 태그 와
– style= display: grid 를 사용하여 수시로 변하는 정보 텍스트를 표현하였습니다.
Arcade로 색상을 지정할 때 주의할 점은 바로 라인 항목 템플릿에서 변경되길 원하는 텍스트 색상은 기본 색상으로 지정해주어야 하는 점입니다. HTML 혹은 색상 설정으로 색상을 덮어씌울 경우 Arcade에서 지정된 색보다 우선하게 됩니다.

HTML과 Arcade를 이용하면 ArcGIS의 기본 ExB와 대시보드 앱의 디자인을 더 효율적이고 이해하기 쉽게 표현이 가능해집니다. Arcade는 ArcGIS 플랫폼에서 사용하기 위해 만들어진 언어로 간단한 수학적 계산, 텍스트 조작 등을 할 수 있기 때문에 위에 예시로 나타낸 방법 외에도 다양한 결과를 나타낼 수 있습니다. 또한 많은 종류의 데이터를 지도 위에 효과적으로 시각화 하고 사용자의 요구에 맞게 수정 및 표현할 수 있습니다. 상황에 따라 유연하게 활용되는 Arcade와 HTML을 활용하여 ArcGIS Experience Builder와 Dashboard의 사용을 확장해보세요!

 

한국지비에스 신규멤버를 소개합니다.

허필규 매니저가 한국지비에스에 새롭게 합류하였습니다.

컴퓨터 공학과를 전공하였으며 허필규 매니저는 시각적인 강점에 매력을 느껴 GIS로 첫 회사를 시작했으며 지금도 세상의 변화에 가까운 위치에서 섬세한 영향력을 발휘하는 것이 매력적인 분야라고 생각합니다.

SI 개발사에서 3년 반동안 근무를 한 경험이 있으며 드론 관련 회사에서도 잠깐 업무를 수행했었습니다. 그 후 Esri Korea에 입사하여 3년 반 동안 근무를 하면서 GIS에서 “플랫폼은 필수다”라는 생각이 확고하게 되어 한국지비에스로 오게되었습니다. 허필규 매니저는 한국에서의 GIS가 스마트하고 자연스럽게 전분야에 녹아드게 만드는 것에 기여하는 것이 우선의 목표라고 하였습니다.

허필규 매니저는 최근 라틴 댄스를 다시 시작했습니다. 또한 자전거를 한 주에 300~400km 씩 탈만큼 즐겨도 했습니다. 자출할 환경이 된다면 다시 타고 싶다고 합니다.

“GBS 화이팅!”