Cesium js 와 Qgis를 활용한 3D 건물 구현하기

이번시간에는 Qgis를 통해 구축한 3D 건물데이터를 Cesium JS를 통해 맵 상에 구현해보도록 하겠습니다.
결과화면 보겠습니다.

> 서비스바로가기

먼저, Qgis를 통해 데이터를 생성하도록 하겠습니다. 
활용 데이터 : 국가공간정보포털 - 건물통합정보마스터 (업로드 용량제한으로 인해 예제파일을 첨부 못하는 점 양해바랍니다.)

데이터 중 여의도 지역만 추출하도록 하겠습니다. 
추출 방법은 다음과 같습니다. 

shift키를 누른 채 마우스 클릭 및 끌기를 하여 지역을 다중선택 합니다.

레이어 트리에서 해당 레이어를 "선택한 객체를 다른이름으로 저장"으로 저장합니다. (좌표계는 EPSG:4326)

플러그인을 이용해 추출한 여의도 지역을 3D로 변환시켜보겠습니다.
먼저, Qgis2threejs 플러그인을 설치해주세요. 설치 후 플러그인을 실행시킵니다.

앞서 추출하였던 여의도 지역이 3D로 변환된것을 볼 수 있습니다.

해당 레이어를 우클릭하여 properties를 연 후, 옵션을 설정합니다. 필자는 아래와 같이 설정하였습니다.

옵션 설정 후 그림과 같이 레이어를 GLTF 포맷으로 저장합니다. (Cesium JS는 기본적으로 GLTF 포맷을 사용합니다.)

 

이제 Cesium JS에 데이터를 적용시켜보겠습니다. 

데이터를 올렸지만 위와 같은 현상이 발생했습니다.

여기서 필자는 2가지 방법을 활용하여 데이터의 위치를 조정할 수 있었습니다.

* Cesium ION 활용

Cesium ION 사이트에 접속 후 Add data 버튼을 눌러 여의도 데이터를 Upload합니다.

Upload 버튼을 누릅니다.

업로드가 완료된 데이터를 확인하니 Tileset의 위치가 설정되어있지않다는 문구가 표출됩니다.
데이터 화면 위에 Adjust Tileset Location 버튼을 눌러 데이터의 위치 및 옵션을 설정해야 합니다.

도구들을 통해 설정을 해주도록 합니다.
search를 통해 데이터를 위치시켜주고 Rotation 메뉴를 통해 데이터의 방위를 맞춘 후 Scale을 통해 데이터의 크기를 설정하여 줍니다.
그리고 데이터에 위치해있는 파랑, 빨강, 초록선들을 활용하여 세부 위치를 조절합니다.

파란선은 높이를 빨간선과 초록선은 X, Y축이라 생각하시면 됩니다. 설정 후 Save 버튼을 눌러 저장 및 완료 합니다.

Cesium ION에서 작업 한 데이터를 맵 상에 올려보겠습니다. 사용한 소스코드는 아래와 같습니다.

var position = Cesium.Cartesian3.fromDegrees(126.926094, 37.526077, 0);

var tileset = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(*****),
		position : position
	})
); 

실행 화면입니다.

3D 건물이 맵 상에 표출된 모습입니다.

 

* 소스코드상에서 3D 모델의 위치를 조정

var headingPitchRoll = new Cesium.HeadingPitchRoll();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('south', 'east');

var model = scene.primitives.add(Cesium.Model.fromGltf({
	url : 'js/image/test.gltf',
	modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
	scale : 37.5
	})
);

localFrameToFixedFrameGenerator 함수를 사용하였습니다.

요약하자면 원점의 프레임을 기준으로 firstAxis, secondAxis를 참고하여 프레임을 변환한다는 의미입니다.
firstAxis와 secondAxis의 의미는 east, north는 올리고 west, south는 내린다는 말로 둘의 설명이 같습니다.
즉, firstAxis와 secondAxis의 값에 따라 프레임의 위치가 변경되는 것입니다.

실행화면입니다.

위 사진과 같이 건물 데이터가 맵상에 올바르게 위치하였습니다.