관리 메뉴

팀드모네 IT Blog

CesiumJS 사용법 간단 안내 본문

GIS

CesiumJS 사용법 간단 안내

남명 팀드모네 2021. 3. 29. 10:54

안녕하세욥 플랫폼공작소입니다.

 

뭔가 GTA 하위 호환 게임을 만드는 것 같기도 한 CesiumJS를 알아보겠습니다.

 

CesiumJS로 건축물 3D 제작

Cesium은 웹 기반으로 동작하기 때문에

 

모바일에서도 잘 동작하는 모습을 보입니다. (데이터를 엄청 쓰는 것 같은데.. 이번달 통신비는 200% 달성?!)

 

CesiumJS mobile

거두절미하고 코드를 확인하겠습니다.

 

파일명 : qucikStart.html

<!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.79.1/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/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.
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWEzMWUwNS1mNDEzLTQ3ZjctOWMzNS1kYTQzOWZjNDBiMGYiLCJpZCI6NDcxNDksImlhdCI6MTYxNjk4MjIyM30.jFC5i3Jrmd710B_soZTocY5JEQPnrhVGNB3vXtXCtU4';
    // 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(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

 

중간에 자세히 보시면 Cesium.Ion.defaultAccessToken이라는 변수가 있습니다.

 

이게 뭐냐면 말그대로 토큰입니다. 구글 맵에서 api키라고 생각하시면 됩니다. (겍.. 유료화?!)

 

어쨋든 토큰을 발급하는 URL을 전달드리니 참고바랍니다 ^  ^;

 

URL : cesium.com/ion/tokens

 

아무튼 위 코드를 실행하면 아래와 같은 결과를 바로 확인하실 수 있습니다.

 

결과 : 

예쁘네요. 세상을 지배한 느낌입니다. 화성(MARS) 버전도 만들어서 일론머스트 형님에게 팔아야겠어요.

 

곰곰히 생각해보니 가상 세계라는 예술작품을 만들 수 있을거 같네요.

 

감사합니다~ 좋은 하루 되세욥

'GIS' 카테고리의 다른 글

CesiumJS을 사용하여 3D 건축물 세워보기  (0) 2021.03.29
CesiumJS 사용법 간단 안내  (0) 2021.03.29
Example of an OpenLayer marker output  (0) 2021.01.20
0 Comments
댓글쓰기 폼