Cesium-加载GLB和倾斜摄影模型 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cesium</title>
    <!-- 引入 Cesium 的 CSS 文件 -->
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <!-- 创建一个 div 作为 Cesium 视图的容器 -->
    <div id="cesiumContainer"></div>
    <!-- 引入 Cesium 的 JavaScript 文件 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Cesium.js"></script>
    <script>
      // 初始化 Cesium 视图
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZDVlMTQ5ZC1kZTYxLTQzM2MtODU3ZS1kMjA4YzZiOTBjZGEiLCJpZCI6Mjc5NTY3LCJpYXQiOjE3NDA2NDMyODJ9.ScSAm-1y-8DT0uq4DXGt8NQrEPVo3b_f-P_5bghF7rU";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
        geocoder: false, //是否显示位置查找工具
        homeButton: false, //是否显示首页位置工具
        sceneModePicker: false, //是否显示视角模式切换工具
        baseLayerPicker: false, //是否显示默认图层选择工具
        navigationHelpButton: false, //是否显示导航帮助工具
        animation: false, //是否显示动画工具
        timeline: false, //是否显示时间轴工具
        fullscreenButton: false, //是否显示全屏按钮工具
        infoBox: false,
        creditContainer: document.createElement("div"), //移除左下角的版权信息
      });

      const glbPath = "./Cesium_Air.glb";
      const tazhongPath = "./tazhong/tileset.json";
      
      // 定义模型的位置
      const position = Cesium.Cartesian3.fromDegrees(
        116.3912757,
        39.906217,
        100
      );
      // 创建一个 Entity 对象来加载 GLB 模型
      const modelEntity = viewer.entities.add({
        name: "Cesium Air GLB Model",
        position: position,
        model: {
          uri: glbPath,
          scale: 20000, // 调整模型的缩放比例
        },
      });
      // viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(
      //     116.3912757,
      //     39.906217,
      //     30000000
      //   ),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0),
      //     pitch: Cesium.Math.toRadians(-90),
      //   },
      // })

      // 加载倾斜摄影模型
      const tileset = new Cesium.Cesium3DTileset({
        url: tazhongPath,
      });
      // 设置倾斜摄影模型的高度参考为贴地
      tileset.style = new Cesium.Cesium3DTileStyle({
        color: "color('white')",
        show: true,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      });
      // 将倾斜摄影模型添加到场景中
      viewer.scene.primitives.add(tileset);
      viewer.zoomTo(tileset);
    </script>
  </body>
</html>
posted @ 2025-03-03 09:18  Khru  阅读(479)  评论(0)    收藏  举报