<!DOCTYPE>
<html>
<meta charset="UTF-8">
<head>
<script src="js/Cesium-1.53/Build/Cesium/Cesium.js"></script>
<link href="js/Cesium-1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
#toolbar{
padding : 1px;
border-redius : 4px;
}
#toolbar input{
vertical-align : middle;
padding-top : 2px;
padding-bottom : 2px;
}
#toolbar .header{
font-weight : bold;
}
</style>
<div id="cesiumContainer" style="width:auto; height:620px;"></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,
selectionIndicator : false,
navigationHelpButton : false,
infoBox : false,
navigationInstructionInitiallyVisible : false,
baseLayerPicker : true,
shouldAnimate : true, //animation 가능
terrainProvider : Cesium.createWorldTerrain() // 기본 지도를 지형지도로 셋팅
});
viewer.scene.globe.enableLighting = true;
viewer.scene.globe.depthTestAgainstTerrain = true; //지형 생성 관련
Cesium.Math.setRandomNumberSeed(3);
// 시작, 종료 날짜 설정
var start = Cesium.JulianDate.fromDate(new Date(2019, 2, 8, 10));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
// viewer 작동 시간 확인
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop 종료
viewer.clock.multiplier = 10;
// 항공기 비행 구역 설정
function computeCircularFlight(lon, lat, radius){
var property = new Cesium.SampledPositionProperty();
for(var i=0; i<=360; i+=45){
var radians = Cesium.Math.toRadians(i); // 범위 설정
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()); // 시간 설정
var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), // 비행구역 위치 설정
lat + (radius * Math.sin(radians)),
Cesium.Math.nextRandomNumber() * 500+1000);
property.addSample(time, position);
// 비행구역 구분점 표시
viewer.entities.add({
position : position, // position = 비행구역 위치
point : {
pixelSize : 8,
color : Cesium.Color.YELLOW,
outlinecolor : Cesium.Color.YELLOW,
outlineWidth : 3
}
});
}
return property;
}
var position = computeCircularFlight(126.924403, 37.524624, 0.03); // 비행구역 중간점 설정
var entity = viewer.entities.add({availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start,
stop : stop
})]),
position : position,
orientation : new Cesium.VelocityOrientationProperty(position),
model : {
uri : "js/Cesium-1.53/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf",
minimumPixelSize : 64
},
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.YELLOW
}),
width : 10
}
});
// ====================== 카메라 시점 변경 부분==========================
// 상공에서 바라보기
function lookSkyview(){
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(126.924403, 37.524624));
var camera = viewer.camera;
camera.constraintedAxis = Cesium.Cartesian3.UNIT_Z;
camera.lookAtTransform(transform, new Cesium.Cartesian3(-10000.0, -10000.0, 25000.0));
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
}
// 측면에서 바라보기
function lookSideview(){
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(-90),
Cesium.Math.toRadians(-15), 8000));
}
// 항공기 바라보기
function lookAirport(){
viewer.trackedEntity = entity;
}
</script>
</head>
<body>
<div id="toolbar">
<h5>항공기 관점 변경하기</h5>
<div id="camcontrol">
<input type="button" class="cesium-button" value="상공에서 바라보기" onclick="lookSkyview();">
<input type="button" class="cesium-button" value="측면에서 바라보기" onclick="lookSideview();">
<input type="button" class="cesium-button" value="항공기 바라보기" onclick="lookAirport();">
</div>
</div>
</body>
</html>
