Cesium添加3DTile

简介: 这篇文章介绍了如何在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>

1693836636387.jpg

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

相关文章
|
JavaScript 前端开发 定位技术
Cesium介绍和入门
这篇文章介绍了Cesium的基本概念及其在Web开发中的应用,包括如何集成Cesium并使用它来创建和展示3D地图。
1354 4
Cesium介绍和入门
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
3107 0
cesium添加实体不被地形遮挡的参数设置
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4475 0
干货!解决Cesium中Entity移动漂移的问题
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
1957 0
Threejs实现天空盒,全景场景,地面草地
|
算法 定位技术
Threejs中使用A*算法寻路导航,Threejs室内室外地图导航
Threejs中使用A*算法寻路导航,Threejs室内室外地图导航
1637 0
Threejs中使用A*算法寻路导航,Threejs室内室外地图导航
Cesium中开启等高线渲染
最近接到一个需求,需要在Cesium中基于实时地形开启等高线效果,让用户可以看到真实效果。
1135 0
Cesium中开启等高线渲染
Cesium自动生成建筑物3D轮廓模型
这篇文章讲解了如何使用Cesium根据地形和建筑物的高度数据自动生成3D轮廓模型的方法。
803 2
|
JavaScript 前端开发 数据格式
Cesium案例解析(四)——3DModels模型加载
Cesium案例解析(四)——3DModels模型加载
819 0
|
数据可视化 JavaScript 前端开发
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
674 0
|
JSON 数据格式
Cesium实现贴地线
这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。
422 5
Cesium实现贴地线