GIS
CesiumJS 사용법 간단 안내
728x90
안녕하세요. 팀드모네입니다.
뭔가 GTA 하위 호환 게임을 만드는 것 같기도 한 CesiumJS를 알아보겠습니다.
Cesium은 웹 기반으로 동작하기 때문에
모바일에서도 잘 동작하는 모습을 보입니다. (뭔가, 데이터를 엄청 쓰는 것 같은데..)
거두절미하고 코드를 확인하겠습니다.
1. html 생성
파일명 : 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
아무튼 위 코드를 실행하면 아래와 같은 결과를 바로 확인하실 수 있습니다.
2. 결과 확인
예쁘네요. 세상을 지배한 느낌입니다.
곰곰히 생각해보니 가상 세계라는 예술작품을 만들 수 있을거 같네요.
블로그 방문해주셔서 감사합니다.
추가로 질문사항이 있으면 댓글 남겨주세요 :)
광고 링크 : https://ogx4.com
인공지능이 추천하는 10개의 게임!
보물처럼 숨겨진 게임을 발굴하자! 게이머엑스포 유저들은 누구나 게임 발굴 대회에 참여 가능합니다. 게임 발굴 대회에서 입상한 게임은 2023 에디터 추천 TOP100에 노출됩니다. 단순 조회, 게임
ogx4.com
반응형
'GIS' 카테고리의 다른 글
| [QGIS] 라인의 버텍스에 라인을 그리는 방법 (0) | 2022.07.11 |
|---|---|
| 캐디안 프로그램에서 .NET dll 로드 방법 (0) | 2021.05.20 |
| CesiumJS을 사용하여 3D 건축물 세워보기 (1) | 2021.03.29 |
| Example of an OpenLayer marker output (0) | 2021.01.20 |
Contents
소중한 공감 감사합니다