Cesium添加3DTile-CFANZ编程社区

Cesium添加3DTile

Cesium最常用来做数字孪生，在3D地图上创建一个3D模型，并将它放在地图上，贴合地面，使之看起来更加贴近现实中的实际情况，这里就在地球上放置一个3DTile的模型来模拟现实情况。这里的模型我是找的例子，只做一个实现方法上的演示，下面是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="cesiumContainer" class="fullSize"></div>

    <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNDgzZGEyYy0yZmFkLTQ3ZGItOWU2My1jZjRkN2ZhNTU0OTAiLCJpZCI6MTYyODM0LCJpYXQiOjE2OTMxMjA4MTB9.xHUQdfmqpl3Iei6Iur_AOYeg2jyDiXZsaYBg33KU_zg';
	  //初始化div容器为cesium
      var viewer = new Cesium.Viewer('cesiumContainer');
	  //加载瓦片集
      const tileset = new Cesium.Cesium3DTileset({
        url: "tileset.json",
      });
		
      tileset.readyPromise.then(function (tileset) {
	  //将瓦片集添加到cesium场景中
        viewer.scene.primitives.add(tileset);
		//调用viewer.zoomTo()方法将相机聚焦在瓦片集上
        viewer.zoomTo(
          tileset,
		  //这里使用了一个HeadingPitchRange对象，其中包含了相机的朝向、俯仰角和距离
          new Cesium.HeadingPitchRange(
            0.0,
            -0.5,
            tileset.boundingSphere.radius * 2.0
          )
        );
      });
    </script>
  </body>
</html>

以上如果有问题可以在我评论区留言，需要这部分的相关文件也可以留个邮箱

0 条评论