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

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

相关文章
193Echarts - 自定义系列(Custom Cartesian Polygon)
193Echarts - 自定义系列(Custom Cartesian Polygon)
54 0
|
2月前
|
JSON 数据格式
Cesium绘制一个正方体
这篇文章详细说明了如何在Cesium中创建并精确控制一个厘米级精度的立方体模型。
42 2
Cesium绘制一个正方体
|
2月前
|
前端开发
ThreeJs通过canvas和Sprite添加标签
这篇文章介绍了在Three.js中利用Canvas和Sprite实现动态文本标签的方法,使得标签可以跟随模型并在3D空间中始终保持面向摄像机。
91 0
ThreeJs通过canvas和Sprite添加标签
|
4月前
|
数据可视化 JavaScript 前端开发
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
160 0
|
6月前
|
前端开发 开发者
CSS进阶-2D变换:translate, rotate, scale
【6月更文挑战第15天】CSS 2D变换如`translate`、`rotate`和`scale`赋予了网页设计灵活性,无需改动HTML即可实现元素移动、旋转和缩放。本文详解这三个属性,讨论使用中的问题和解决方案,并提供代码示例。例如,`translate(50px, 100px)`平移元素,`rotate(45deg)`顺时针旋转45度,`scale(1.5, 1)`水平放大1.5倍。理解百分比、旋转中心和缩放影响,结合transform-origin和注释,能帮助开发者更好地掌握这些技巧。
133 4
265Echarts - GL 矢量场图(Flow on the cartesian)
265Echarts - GL 矢量场图(Flow on the cartesian)
77 0
246Echarts - 3D 曲面(Image Surface Sushuang)
246Echarts - 3D 曲面(Image Surface Sushuang)
51 0
250Echarts - 3D 曲面(Sphere Parametric Surface)
250Echarts - 3D 曲面(Sphere Parametric Surface)
37 0
256Echarts - 3D 曲面(Surface Wave)
256Echarts - 3D 曲面(Surface Wave)
92 0
mapbox-gl:数据多样式显示
mapbox-gl:数据多样式显示
330 0
mapbox-gl:数据多样式显示