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 모델 생성하기 (1) | 2019.01.29 |
| Cesium JS에서 OGC Web Service 이용하기 (0) | 2019.01.15 |
| CesiumJS 시작하기 (2) | 2019.01.15 |