Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

cesium 소스코드

* 2024. 11. 12. cesium js 1.123 동작 확인.

cesium_js/server.js

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'node_modules/cesium/Build/Cesium')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

cesium_js/index.html

<html>
<head>
    <meta charset="utf-8">    
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body onload="render()">
  <div id="cesiumContainer"></div>
  <div id="toolbar"></div>
  <script>
    async function render()
    {
      Cesium.Ion.defaultAccessToken = "여기에_토큰_붙여넣기";

      // cesium에서 제공하는 지형을 보여주는 뷰어 생성.
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1)
      });
      viewer.scene.globe.depthTestAgainstTerrain = true;

      try
      {
        // 애셋을 추가한다.
        // OSM Building 애셋 추가.
        var tileset = await Cesium.Cesium3DTileset.fromIonAssetId(96188);
        viewer.scene.primitives.add(tileset);
        
        // 카메라 위치와 방향 조정
        await viewer.scene.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(127.056718, 36.527274, 300), // 위도, 경도, 높이
          orientation: new Cesium.HeadingPitchRoll.fromDegrees(0, -10, 0,), // Heading(Yaw), Pitch, Roll(bank)
        });      
      } catch (error) 
      {
        console.log(error);
      }
    };
  </script>
</body>
</html>


cesium_js/index.html 에셋 추가 예

<html>
<head>
    <meta charset="utf-8">    
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body onload="render()">
  <div id="cesiumContainer"></div>
  <div id="toolbar"></div>
  <script>
    async function render()
    {
      Cesium.Ion.defaultAccessToken = "여기에_토큰_붙여넣기";

      // cesium에서 제공하는 지형을 보여주는 뷰어 생성.
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1)
      });
      viewer.scene.globe.depthTestAgainstTerrain = true;

      try
      {
        // 애셋을 추가한다.
        var tileset = await Cesium.Cesium3DTileset.fromIonAssetId(96188);
        viewer.scene.primitives.add(tileset);

        tileset = await Cesium.Cesium3DTileset.fromIonAssetId(111111111);
        viewer.scene.primitives.add(tileset);
        
        // 카메라 위치와 방향 조정
        await viewer.scene.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(127.056718, 36.527274, 300), // 경도, 위도, 높이
          orientation: new Cesium.HeadingPitchRoll.fromDegrees(0, -10, 0,), // Heading(Yaw), Pitch, Roll(bank)
        });      
      } catch (error) 
      {
        console.log(error);
      }
    };
  </script>
</body>
</html>