CesiumJS 시작하기

Cesium JS 시작하기

Node JS 환경 

> 서비스바로가기

ApacheTomcat 환경

> 서비스바로가기

* CesiumJS 란? 

플러그인없이 웹 브라우저에서 3D지도를 만들기위한 오픈소스 JavaScript 라이브러리 입니다. 

* CesiumJS 시작하기

1. 가입하기

 CesiumJS를 이용하기 위해서는 먼저 Cesium ion에 가입을 하여야 합니다. (AccessToken 발급)

  -> Cesium ion 바로가기

1. Node JS 환경에서 Cesium JS 활용하기

* Express 프레임워크 활용하기

Node JS의 모듈 중 Express 프레임워크를 기반으로 작업을 진행하겠습니다.

Express를 사용하는 이유는 대중적이고 인기가 많을뿐만아니라 소스코드의 간소화로 인해 향후 유지보수를 쉽게 하기 위함입니다.

기본 서버 구성하기

  1. server라는 이름의 js 파일을 생성합니다.

  2. 아래의 소스코드를 입력합니다. (콘솔과 웹상에 Hello Cesium이라는 문구를 표출하여 확인을 해봅니다.) 

const express = require('express');
const app = express();
 
app.use('/', function (req, res) {
    res.send("Hello Cesium");
});
 
app.listen(8080, function () {
    console.log("Hello Cesium");
});

node 서버를 실행시킨 후 콘솔과 웹상에 아래와 같이 표출된다면 서버구성 성공입니다!

웹상에 표출할 HTML 구성하기

  1. 먼저 html이라는 이름의 폴더를 생성합니다.

  2. html 폴더안에 testmap이라는 이름의 html파일을 생성합니다.

  3. 아래의 소스코드를 입력합니다.

$(function(){
    var baseMap, mapViewer;
 
    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 mapViewer = new Cesium.Viewer(
        'cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false,
 
            imageryProvider : Cesium
                .createOpenStreetMapImageryProvider({
                    url : 'https://a.tile.openstreetmap.org/'
                }),
 
            baseLayerPicker :true
        });
});

server.js와 testmap.html 연결하기

1. server.js의 코드를 아래와 같이 변경하여 줍니다.

var express = require('express');
var app = express();
var path = require('path');
 
app.use(express.static(path.join(__dirname, 'html')));
 
app.get('/', function (req,res) {
    res.sendFile(path.join(__dirname, 'html', 'testmap.html'));
});
 
app.use('/', function (req, res) {
    res.send("Hello Cesium");
});
 
app.listen(8081, function () {
    console.log("Hello Cesium");
});

html과 같은 정적 파일을 제공하기위한 소스코드

app.use(express.static(path.join(__dirname, 'html')));

웹상에 표출할 html파일을 바라보기위한 소스코드 

app.get('/', function (req,res) {
    res.sendFile(path.join(__dirname, 'html', 'testmap.html'));
});

최초 시작 시 web에 표출될 지역의 범위와 높이를 설정

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;

Open Street Map을 불러옵니다.  

imageryProvider : Cesium.createOpenStreetMapImageryProvider({
                    url : 'https://a.tile.openstreetmap.org/'
                }),

* Tip - baseLayerPicker : true 하면 오른쪽 상단 메뉴에 베이스레이어를 선택하는 버튼이 생성됩니다.

* Tip - 세슘 Rectangle document 정보 https://cesiumjs.org/Cesium/Build/Documentation/Rectangle.html

staticCesium.Rectangle.fromDegrees(west, south, east, north, result) → Rectangle Core/Rectangle.js 191 Creates a rectangle given the boundary longitude and latitude in degrees. Name Type Default Description west Number 0.0 optionalThe westernmost longitude in degrees in the range [-180.0, 180.0]. south Number 0.0 optionalThe southernmost latitude in degrees in the range [-90.0, 90.0]. east Number 0.0 optionalThe easternmost longitude in degrees in the range [-180.0, 180.0]. north Number 0.0 optionalThe northernmost latitude in degrees in the range [-90.0, 90.0]. result Rectangle optionalThe object onto which to store the result, or undefined if a new instance should be created. Returns: The modified result parameter or a new Rectangle instance if none was provided.

소스코드 구성을 마쳤으니 실행해보도록 하겠습니다. 

> 서비스바로가기

2. Apache Tomcat 환경에서 Cesium JS 활용하기

필자는 Eclipse IDE를 활용하여 작업을 진행하였습니다.

Cesium JS 다운받기 

해당 사이트로 접속하여 Cesium JS를 다운받습니다. (https://cesiumjs.org/downloads/)

프로젝트 생성하기

Dynamic Web Projcet를 이용하여 프로젝트를 생성합니다. 

Apache Tomcat 서버 구성하기 (Apache-tomcat Download)

톰캣 사이트에 들어가 본인 운영체제 환경에 맞게 다운로드를 합니다.

서버 구성 순서 ( Window -> Preferences -> Server -> Runtime Enviroments -> Add -> Next -> Finish) 

HTML 구성하기 

기본적인 HTML 구성 후 로컬상에서 서버를 실행하여 제대로 구동되는지 확인해보겠습니다.

start라는 이름의 html파일을 생성 후 아래의 소스코드를 입력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<h1>Hello Cesium</h1>
</body>
</html>

사진과 같이 작동되는것을 확인할 수 있습니다.

다운받은 Cesium JS 파일 업로드 하기 

다운받은 Cesium JS 폴더를 압축 해제 후 WebContent 디렉토리 하단 또는 본인 임의의 디렉토리 내부로 이동시킵니다.

Cesium JS 활용하기 

앞서 기본적으로 구성하였던 start.html의 소스코드를 아래와 같이 교체합니다.

<!DOCTYPE html>
<html lang="en">
<meta charset = "UTF-8">
<head>
    <script src="js/Cesium-1.50/Build/Cesium/Cesium.js"></script>
    <link href="js/Cesium-1.50/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width:100%; height:710px"></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,
            
            imageryProvider : Cesium.createOpenStreetMapImageryProvider({
                url : 'http://a.tile.openstreetmap.org/'
            }),
            
            baseLayerPicker : true
        });
</script>
</body>
</html>
 

서버와 소스코드 구성을 완료 하였으니 실행해보도록 하겠습니다.

> 서비스바로가기