Cesium JS에서 시점 변경 기능 활용하기

이번엔 Cesium JS를 활용하여 시점 변경 기능을 만들어 보도록하겠습니다.

> 서비스바로가기


1. 카메라 시점 변경 기능을 위한 "range" Element 구성     


<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
<div id="cesiumContainer" style="width:auto; height:600px;"></div>
 
<div>
    <h2>카메라 시점 변경하기</h2>
    <input type="range" id="controllbar" name="range_value" min="500" max="15000" step="100" onchange="lookAtTransform(value)">
</div>
 
</body>
</html>
cs

- 최소값을 500 , 최대값을 15000으로 설정하고 step을 100으로 잡아 한번의 이동 시 100만큼의 값이 조절되도록 하였습니다.

- onchange함수를 설정하여줍니다.


실행화면은 다음과 같습니다.


2. script 태그 안에 아래와 같은 소스코드를 적용합니다.


<script type="text/javascript">
    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.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false   
        });
    
    //카메라 시점 조절하기 
    function lookAtTransform(value){
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(126.923428, 37.524969)); // 카메라 시점이 적용될 위,경도         
        var camera = viewer.camera; //camera 선언
        
        camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
        camera.lookAtTransform(transform, new Cesium.Cartesian3(-10000.0, -10000.0, value)); // 시점 변경을 위한 초기범위 설정    
    }
</script>
cs

"value"는 input태그 안 controllbar의 움직임에 따라 고도(각도)값이 변경됩니다. 


전체 소스코드는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
<div id="cesiumContainer" style="width:auto; height:600px;"></div>
 
<div>
    <h2>카메라 시점 변경하기</h2>
    <input type="range" id="controllbar" name="range_value" min="500" max="15000" step="100" onchange="lookAtTransform(value)">
</div>
 
<script type="text/javascript">
    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.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false   
        });
    
    //카메라 시점 조절하기 
    function lookAtTransform(value){
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(126.923428, 37.524969));          
        var camera = viewer.camera;
        
        camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
        camera.lookAtTransform(transform, new Cesium.Cartesian3(-10000.0, -10000.0, value));        
    }
</script>
</body>
</html>        
cs


완성된 최저, 중간, 최상으로 움직였을때의 화면입니다.

 - 자세한 기능을 보기위해 실행 화면 우 상단 baseLayer Map을 "Terrain Map"으로 변경합니다.

사진과 같이 controllbar 조절에 따라 시점이 변경되는 것을 볼 수 있습니다.

> 서비스바로가기

'꿀팁 - CesiumJS, nullschool' 카테고리의 다른 글

Cesium JS에서 glTF 포맷 활용하기  (1) 2019.02.12
Cesium JS에서 비행 Animation 활용하기  (0) 2019.02.08
Cesium JS에서 3D 모델 생성하기  (0) 2019.01.29
Cesium JS에서 OGC Web Service 이용하기  (0) 2019.01.15
CesiumJS 시작하기  (0) 2019.01.15

+ Recent posts

티스토리툴바