cesium加载DEM和3DTiles

horizon_Moon

已于 2023-08-02 11:38:49 修改

阅读量778

点赞数 3

文章标签： 3d javascript 智慧城市

于 2023-08-02 11:32:50 首次发布

本文链接：https://blog.csdn.net/m0_51947486/article/details/132045575

版权

cesium加载DEM和3DTiles

简介
数据处理
代码编写
调整3DTiles
完整代码

简介

3DTiles，一种用于流式传输和渲染3D地理空间数据的开放规范。文件中包含Data文件夹、Texture文件夹、*.json文件，json中包含多个节点，asset、geometricError、root、boundingVolume、refine、children、content等，各有其作用。
DEM，数字高程模型，通常以栅格（raster）或TIN（Triangulated Irregular Network）的形式存在，文件后缀常为.tif。

数据处理

CesiumLab ，要利用cesium库加载DEM，先对DEM数据进行处理。通过CesiumLab将DEM数据转换为Terrain文件，并发布托管，获得资产ID。
Cesium ion，Cesium ion是一个由Cesium开发的在线平台，它提供了一系列工具和服务，用于创建和发布3D地理空间数据和应用程序。
数据托管 ，将3DTiles和DEM托管到Cesiumion，点击页面中的Add data，添加3DTiles和Terrain数据。
Token注册，使用cesium服务，先申请token。

代码编写

引入Cesium库

<script src="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

Token添加

  Cesium.Ion.defaultAccessToken = '**Your Token**';

添加DEM

 const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(
      Your DEM ID
    ),
  });

添加3DTiles

 const tilesetModel = viewer.scene.primitives.add(
      await Cesium.Cesium3DTileset.fromIonAssetId(Your 3DTiles ID)
    );
    viewer.scene.primitives.add(tilesetModel);

缩放到模型位置

viewer.zoomTo(tilesetModel);

缩放到DEM位置

 viewer.zoomTo(tilesetModel).then(function() {
    setTimeout(function() {
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(’‘经度坐标’‘, ’‘纬度坐标’‘, 400),
            orientation: {
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-15.0),
            }
        });
    }, 5000); 
});

调整3DTiles

在CesiumJS中，Matrix2、Matrix3和Matrix4是用来表示2x2、3x3和4x4矩阵的类。这些矩阵在计算机图形学中有广泛的应用，例如变换（平移、旋转、缩放）对象、投影对象到屏幕等。

Matrix2: 用于表示2x2矩阵，通常用于二维变换。
Matrix3: 用于表示3x3矩阵，通常用于三维旋转。
Matrix4: 用于表示4x4矩阵，通常用于三维变换（平移、旋转、缩放）和投影。

变换函数有：
Cesium.Matrix3.fromRotationX、Cesium.Matrix3.fromRotationY、Cesium.Matrix3.fromRotationZ、Cesium.Matrix4.fromRotationTranslation、Cesium.Matrix4.multiply、 Cesium.Cartesian3.fromDegrees

完整代码

其中*号需要替换为自身Token、经纬度或资产ID

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>

  <div id="cesiumContainer"></div>

  <script type="module">
    // Your access token can be found at: https://ion.cesium.com/tokens.
    // This is the default access token from your ion account

    Cesium.Ion.defaultAccessToken = '******';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    // const viewer = new Cesium.Viewer('cesiumContainer'
    // , {
    //   terrain: Cesium.Terrain.fromWorldTerrain(),
    // }
    // );

    //添加DEM
  const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(
      ******
    ),
  });

    //添加3DTiles
    const tilesetModel = viewer.scene.primitives.add(
      await Cesium.Cesium3DTileset.fromIonAssetId(******)
    );
    viewer.scene.primitives.add(tilesetModel);

    viewer.scene.screenSpaceCameraController.enableRotate = true; // 启用旋转
    viewer.scene.screenSpaceCameraController.enableTranslate = true; // 启用平移

    // 缩放到模型所在位置
    viewer.zoomTo(tilesetModel);

    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    // viewer.camera.flyTo({
    //   destination: Cesium.Cartesian3.fromDegrees(******, ******, 400),
    //   orientation: {
    //     heading: Cesium.Math.toRadians(0.0),
    //     pitch: Cesium.Math.toRadians(-15.0),
    //   }
    // });

    // 5000毫秒后执行
    viewer.zoomTo(tilesetModel).then(function() {
    setTimeout(function() {
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(******, ******, 400),
            orientation: {
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-15.0),
            }
        });
    }, 5000); 
});

    console.log(tilesetModel);

    //viewer.zoomTo(tilesetModel, new Cesium.HeadingPitchRange(0, -0.5, 0));

  </script>
  </div>
</body>

</html>