Cesium JS에서 Camera FlyTo 기능 활용하기

Cesium JS에서 Camera FlyTo 기능 활용하기

이번 시간에는 FlyTo기능을 활용하여 대한민국 곳곳을 탐방하는 시뮬레이션을 구현해보도록 하겠습니다.

 * 본 게시물은 3D 모델들이 적용되어있습니다. 독자분들이 이와 같은 개발을 진행하시거나 둘러보실때에는 고사양의 PC를 활용하심이 훨씬 좋습니다.

   특히 그래픽카드가 고사양일 수록 원활한 진행이 가능합니다.

 

먼저 결과 화면부터 확인하세요.

> 서비스바로가기

 

* Camera FlyTo에 대한 설명은 아래와 같습니다. (CesiumDocument 바로가기)

카메라가 기존 위치에서 새로운 위치로 비행한다 라는 설명을 하고있습니다. 

 

* 위 설명을 토대로 구현된 예제 소스코드 입니다.

* 첫번째 예제는 해당 위치로 비행하여 내려다 보겠다는 의미입니다. 

* 두번째 예제는 해당 위치를 정하지 않고 범위를 지정하여 그 범위를 내려다 보겠다는 의미입니다.

* 세번째 예제는 카메라가 지정 위치로 비행하기 위해 orientation을 활용하게 되고 direction과 up 옵션을 사용합니다.

   - 간략히 설명해 두 옵션을 이용해 카메라의 방향과 위치를 지정하는 것입니다.

* 네번째 예제는 orientation에 heading, pitch, roll 값을 지정하여 카메라의 각도와 방향을 지정하는 것입니다. 

 

=> 필자는 본 게시물(시뮬레이션)을 구현하기 위해 1번과 4번 예제를 참조하였습니다.

 

* 구현을 위해 사용한 소스코드

필자는 시뮬레이션 구현을 위해 아래와 같은 소스코드를 적용시켰습니다. 간단합니다.

function tour(){
    setTimeout(function(){
        viewer.scene.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(127.786754, 36.643957, 600000.0)
        });
    },2000);
    
    setTimeout(function(){
        viewer.scene.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(128.075929, 33.014948, 500000.0),
            orientation : {
                heading : Cesium.Math.toRadians(0),
                pitch : Cesium.Math.toRadians(-420),
                roll : Cesium.Math.toRadians(0)
            }
        }); 
    },7000);
}

setTimeout함수 내에 위에 설명하였던 flyTo 함수를 사용하였습니다. 

setTimeout은 시간지연함수로써 지정된 시간이 되었을 때, 실행이되게끔 하는 함수입니다. 

 

* 시뮬레이션 구현을 위한 사전준비

시뮬레이션 전, 필자는 시뮬레이션의 View를 위해 3D건물 모델과 DEM모델을 제작하였습니다. 

(각 모델들을 구현하기 위해 사용한 원천 데이터는 전부 "국가공간정보포털"에서 취득하였음을 알립니다.)

3D건물은 여의도와 성남시에, DEM모델은 제주도에 배치하였습니다.

아래 게시물 바로가기를 통해 각 제작방법을 살펴보시길 바랍니다.

1. Cesium Js와 Qgis를 활용한 3D 건물 구현하기

   > 바로가기

2. DEM - 국가공간정보포털 DEM 자료 활용하기 

   > 바로가기

 

* 구현된 시뮬레이션 확인

시작 화면의 모습입니다. 하단 둘러보기 버튼을 클릭하여 시뮬레이션을 시작할 수 있습니다.

 

시뮬레이션의 순서는 대한민국에서 출발하여 성남시, 여의도, 제주도, 마지막으로 최초 위치로 돌아오게 됩니다.

* 대한민국 전체를 살펴보는 모습입니다.

 

* 성남시를 살펴보는 모습입니다. 사진과 같이 3D 모델로 구현된 건물들을 볼 수 있습니다.

 

* 여의도를 살펴보는 모습입니다.

 

* 제주도를 살펴보는 모습입니다. 제주도에는 필자가 직접 제작한 DEM모델을 적용시켰습니다.