AI 요약
시즈니엄(Cesium) 3D 지구 엔진을 활용해 산불 발생 지점과 주변 자원(취수점, 소방서, 모니터링 카메라, 공항) 간의 연관 관계를 시각화한 대시보드 구현 사례. 하나의 HTML 파일로 구성되어 CDN에서 Cesium 1.114를 불러와 사용하며, 화원(火源) 지점에 반투명 확산 타원, 각 자원 아이콘과 텍스트 라벨, 포물선 아크 선(기본선 + 발광층), 캔버스 2D 입자 흐름 효과를 구현했다. 주요 기술적 난관으로는 아크 높이를 거리 대비 12%로 동적 계산하여 과도한 곡률을 방지한 점과, 지형 깊이 테스트(depthTestAgainstTerrain)를 비활성화해 라벨이 지형에 가려지지 않도록 처리한 점이 있다.
핵심 포인트
- 기술 스택: Cesium 1.114 (CDN), 단일 HTML 파일, Cesium Ion 토큰 필요
- 핵심 시각화: 화원 지점 + 반투명 확산 타원, 자원별 아이콘/라벨, 포물선 아크(기본선+발광층), Canvas 2D 입자 흐름
- 아크 높이 계산:
거리 × 0.12, 최대 4.5km로 제한하여 과도한 곡률 방지 - 성능 최적화: Primitive + GeometryInstance로 4개 라인을 1회 드로우 콜로 병합, 불필요한 UI 및 지형 효과 비활성화
향후 전망
- Cesium 기반 3D 재난 모니터링 시스템은 산불뿐만 아니라 홍수, 지진 등 다양한 재난 상황으로 확장 가능
- 단일 HTML 파일 방식은 프로토타입 제작 및 클라이언트 피드백 수집에 매우 효율적이며, 이후 Vue/React 프로젝트로의 전환도 용이함
출처:juejin