cesium.js통해 3D 지도를 다룬다.

개미는뚠뚠·2023년 11월 11일

cesium.js

목록 보기

1/2

🚀 개요

오늘은 평소보다 재밌는 기술을 다뤄보려고 한다.
나는 평소 회사에서 Gis를 활용하여, 다음과 같은 2D 지도를 다뤘었다.

하지만 기술 발전에 따라 우리 팀장님은 3D 지도에 관심을 많이 가지고 계신다. 나는 그런 팀장님을 따라 three_js 또는 cesium_js를 개인적으로 공부를 하고 있었다.
그리고 이번 휴일을 활용하여 간단히 3D 지도를 표출하는데 성공하였다. 그 내용을 정말 간략하게 정리해보려고 한다.

🚀 3D 지도 띄우기

1.

세슘을 활용하려면 먼저 사이트 가입이 필요하다.
URL : https://ion.cesium.com/

위 URL에 접속하여 회원가입을 진행해주자.

2.

회원가입이 완료되면 토큰을 발급 받는다.

3.

세슘의 지도를 커스텀 하는 부분은 나중에 다룰거고, 이번에는 화면을 띄우는 것을 우선으로 다음 코드를 참조하길 바란다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- CesiumJS js, css 파일 연동 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<!-- 3D Map이 들어갈 컨테이너-->
<div id="cesiumContainer"></div>

<script>
    Cesium.Ion.defaultAccessToken = '발급 받은 토큰을 넣어준다'

    //컨테이너 id를 참조하여 HTML 요소의 세슘 뷰어를 초기화.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });
    //Cesium OSM_ 3D 건물을 추가한다.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
    //fromDegrees 인자로 (경도, 위도, 높이) 를 지정한다.
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(129.040227, 35.115840, 400),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-15.0)
        }
    });
</script>
</body>
</html>