1. 시험환경
˙ HTML
˙ cecium.js v1.96
2. 목적
˙ cecium 사이트 계정 등록 및 접속 토큰을 발급 받는다.
˙ cecium 사이트에서 제공하는 QuickStart 튜토리얼을 실습한다.
- HTML 파일에 Cecium.js 라이브러리를 설정한다.
- HTML 파일을 실행하여 3D 초기화면이 표현되는지 확인한다.
3. 적용
① cecium.js 사이트에 회원가입 후 토큰을 발급받는다.
- URL : https://cesium.com/
Cesium: The Platform for 3D Geospatial
The Cesium platform provides the foundations any software application needs to utilize 3D geospatial data: visualization, data pipelines, curated data, and analytics. Based on open standards for data formats, open APIs for customization and integration, an
cesium.com
② HTML 파일을 생성한다.
- cecium.html
③ CDN방식으로 cecium.js 라이브러리를 연동한다.
- 참고 : https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Your access token can be found at: https://cesium.com/ion/tokens.
// Replace `your_access_token` with your Cesium ion access token.
Cesium.Ion.defaultAccessToken = '발급받은 토큰 입력';
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(127.4175, 37.855, 500),
orientation : {
heading : Cesium.Math.toRadians(0.0),
pitch : Cesium.Math.toRadians(-15.0)
}
});
</script>
</div>
</body>
</html>
|
cs |
4. 결과
˙ 정상 동작을 확인한다.
˙ 튜토리얼 등 여러 문서들을 참고하여 사용법을 본격적으로 익혀보자.
※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※
'자바스크립트 가시화 라이브러리' 카테고리의 다른 글
| [JS] proj4.js 좌표계 변환 예제 (0) | 2022.10.22 |
|---|---|
| [vis.js] 라이브러리 설치 및 샘플 실행 (0) | 2022.07.25 |
| JavaScript 이벤트 처리 코드 (0) | 2022.06.06 |
| [bootstrap] ESC 또는 클릭 시 Modal 닫힘 방지 (0) | 2021.12.10 |
| [jQuery] 테이블 내용 업데이트(삭제, 추가)하는 코드 (0) | 2021.11.08 |