<!DOCTYPE html>
<html lang='en'>
<meta charset="UTF-8">
<head>
<script src="js/Cesium-1.54/Build/Cesium/Cesium.js"></script>
<link href="js/Cesium-1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
@import url(js/Cesium-1.54/Apps/Sandcastle/templates/bucket.css);
</style>
<div id="cesiumContainer" style="width:auto; height:700px;"></div>
<script>
var extent = Cesium.Rectangle.fromDegrees(117.896284, 31.499028, 139.597380, 43.311528);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
var viewer = new Cesium.Viewer('cesiumContainer', {
timeline : false,
animation : false,
selectionIndicator : false,
navigationHelpButton : false,
infoBox : false,
navigationInstructionsInitiallyVisible : false
});
// Gltf포맷 활용가능하게함.
var scene = viewer.scene;
var position = Cesium.Cartesian3.fromDegrees(126.934511, 37.521004, 0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// fromGltf 함수를 사용하여 key : value 값으로 요소를 지정
var name = '프로그APT';
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url : 'js/image/cesium.gltf',
modelMatrix : modelMatrix,
scale : 5000.0,
name : name
}));
viewer.scene.primitives.add(model);
// nameoverlay를 위한 설정
var nameOverlay = document.createElement('div');
viewer.container.appendChild(nameOverlay);
nameOverlay.className = 'backdrop';
nameOverlay.style.display = 'none';
nameOverlay.style.position = 'absolute';
nameOverlay.style.bottom = '0';
nameOverlay.style.left = '0';
nameOverlay.style['pointer-events'] = 'none';
nameOverlay.style.padding = '4px';
nameOverlay.style.backgroundColor = 'black';
// feature select
var selected = {
feature : undefined,
originalColor : new Cesium.Color()
};
// 모델을 select하기위한 부분
var selectedEntity = new Cesium.Entity(model);
// 클릭핸들러 변수선언
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
if(Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)){
// 블루, 그린 실루엣 지원
var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
silhouetteBlue.uniforms.length = 0.01;
silhouetteBlue.selected = [];
var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteGreen.uniforms.color = Cesium.Color.LIME;
silhouetteGreen.uniforms.length = 0.01;
silhouetteGreen.selected = [];
viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));
// mousemove function을 이용하여 모델을 select 후 배열에 담음
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement){
silhouetteBlue.selected = [];
// 모델에 마우스가 move될 시 nameoverlay 출현
var pickedFeature = viewer.scene.pick(movement.endPosition);
if(!Cesium.defined(pickedFeature)){
nameOverlay.style.display = 'none';
return;
}
// nameOverlay 설정
nameOverlay.style.display = 'block';
nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
nameOverlay.style.left = movement.endPosition.x +'px';
nameOverlay.textContent = name;
if(pickedFeature !== selected.feature){
silhouetteBlue.selected = [model];
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 모델을 클릭하여 알럿창을 띄우기위한 부분 / function onLeftClick
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement){
// silhouetteGreen 변수에 담을것
silhouetteGreen.selected = [];
// 새로운 모델 선택
var pickedFeature = viewer.scene.pick(movement.position);
if(!Cesium.defined(model)){
clickHandler(movement);
return;
}
// 선택된 모델이 없으면 새로운 모델 선택 가능
if(silhouetteGreen.selected[model] === pickedFeature){
return;
}
alert("이곳은" +name+ "입니다." +'\n'+ "높이 : "+"68.7"+"m" +'\n'+ "넓이 : "+"30.2"+"m" +'\n'+ "가구 수 : " +"1000"+ "세대");
// 샌택된 모델의 기존색상 저장(파란색)
var highlightedFeature = silhouetteBlue.selected[model];
if(model === highlightedFeature){
silhouetteBlue.selected = [];
}
// 새로 선택된 모델 highlight
silhouetteGreen.selected = [model];
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
</script>
</head>
<body>
</body>
</html>
