Introduction

3DTiles , une spécification ouverte pour le streaming et le rendu de données géospatiales 3D. Le fichier contient Datades dossiers, Texturedes dossiers, *.jsondes fichiers et json contient plusieurs nœuds, asset, , geometricError, root, boundingVolume, refine, childrenetc. content, chacun ayant son propre rôle.
DEM , modèle numérique d'élévation, existe généralement sous forme de raster (raster) ou de TIN (Triangulated Irregular Network), et le suffixe du fichier est souvent .tif.

traitement de l'information

CesiumLab , pour utiliser la bibliothèque césium pour charger DEM, traitez d'abord les données DEM. Convertissez les données DEM en fichiers Terrain via CesiumLab et publiez-les pour l'hébergement 资产ID.
Cesium ion , Cesium ion est une plateforme en ligne développée par Cesium qui fournit une gamme d'outils et de services pour créer et publier des données et des applications géospatiales 3D.
Pour l'hébergement de données , transférez 3DTiles et DEM 托管vers Cesiumion. Cliquez sur Ajouter des données sur la page pour ajouter des données 3DTiles et Terrain.
Enregistrement du jeton , en utilisant le service césium, demandez d'abord un jeton.

Écriture de codes

Importer la bibliothèque 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">

Jetonajouter

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

Ajouter un DEM

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

Ajouter des tuiles 3DT

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

Zoom sur la position du modèle

viewer.zoomTo(tilesetModel);

Zoom sur l'emplacement 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); 
});

Ajuster les tuiles 3D

Dans CesiumJS, Matrix2, Matrix3 et Matrix4 sont des classes utilisées pour représenter des matrices 2x2, 3x3 et 4x4. Ces matrices ont un large éventail d'applications en infographie, telles que la transformation (traduction, rotation, mise à l'échelle) d'objets, la projection d'objets à l'écran, etc.

Matrix2: Utilisé pour représenter une matrice 2x2, généralement utilisée pour les transformations bidimensionnelles.
Matrix3: Utilisé pour représenter une matrice 3x3, généralement utilisée pour la rotation tridimensionnelle.
Matrix4: Utilisé pour représenter une matrice 4x4, généralement utilisée pour la transformation tridimensionnelle (translation, rotation, mise à l'échelle) et la projection.

Les fonctions de transformation sont :
Cesium.Matrix3.fromRotationX, Cesium.Matrix3.fromRotationY, Cesium.Matrix3.fromRotationZ, Cesium.Matrix4.fromRotationTranslation, Cesium.Matrix4.multiply, Cesium.Cartesian3.fromDegrees

Code complet

Quel *号需要替换est son propre jeton, sa latitude et sa longitude ou son identifiant d'actif

<!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>

charges de césium DEM et 3DTiles