Daddy Makers: Cesium 기반 건물 시설물 모니터링 웹 서비스

2020년 2월 27일 목요일

Cesium 기반 건물 시설물 모니터링 웹 서비스

이 글은 Cesium 기반 건물 시설물 웹 서비스 개발을 위해 필요한 내용을 정리한다. 가능한 검증된 오픈소스를 사용해 확장성과 유지관리성이 좋은 Cesium 기술 스택을 사용한다.

아래 링크를 입력하면 관련 코드를 확인할 수 있다.

3D Tiles BIM(ceisum)

이 소스는 Ceisum의 Cesium3DTileset 객체를 생성한 후 primitives 형상으로 뷰어의 scene그래프에 추가하여 3D BIM 형상 모델을 생성한다.
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var tileset = scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(8564)
})
);

tileset.readyPromise.then(function(tileset) {
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 4.0));
}).otherwise(function(error) {
console.log(error);
});

뷰어 캔버스에 마우스 이벤트를 설정해 픽을 할 경우, 선택된 모델 형상이 무엇인지 확인 가능하다. 이를 이용해 형상의 속성정보 등을 확인할 수 있다.
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
if (!picking) {
return;
}

var feature = scene.pick(movement.endPosition);

unselectFeature(selectedFeature);

if (feature instanceof Cesium.Cesium3DTileFeature) {
selectFeature(feature);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

참고로, LoD(level of detail) 옵션을 사용해 형상의 LOD 표현을 다음과 같이 제어할 수 있다.
var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
url : 'http://localhost:8002/tilesets/Seattle/tileset.json',
skipLevelOfDetail : true,
baseScreenSpaceError : 1024,
skipScreenSpaceErrorFactor : 16,
skipLevels : 1,
immediatelyLoadDesiredLevelOfDetail : false,
loadSiblings : false,
cullWithChildrenBounds : true
}));

이 예제는 오픈소스이므로 다운로드한 후 HTTP 서버를 구동해 쉽게 실행할 수 있다.

레퍼런스