fix:update the part of terrian data

src/components/HelloWorld.vue

@@ -15,6 +15,9 @@ onMounted(()=>{
     let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
         "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
         "&style=default&format=tiles&tk=" + TDT_tk;
+    const cesiumKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";
+    // Cesium.Ion.defaultAccessToken = cesiumKey;
+     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw';
 
     viewer = new Cesium.Viewer("cesiumContainer",{
       geocoder: false, //位置查找
@@ -43,17 +46,16 @@ onMounted(()=>{
       //     maximumLevel: 50,
       //     show: false
       // })
-      terrain: Cesium.Terrain.fromWorldTerrain({
+      // terrain: Cesium.Terrain.fromWorldTerrain({
-        requestWaterMask: true,
+      //   requestWaterMask: true,
-        requestVertexNormals: true
+      //   requestVertexNormals: true
-      })
+      // })
     })
     // 添加Cesium ion的地形
-    // viewer.scene.setTerrain(
+    const terrain = new Cesium.Terrain(
-    //   new Cesium.Terrain(
+      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
-    //     Cesium.CesiumTerrainProvider.fromIonAssetId(1),
+    )
-    //   ),
+    viewer.scene.setTerrain(terrain);
-    // );
     viewer.scene.globe.depthTestAgainstTerrain = false; // 图标被遮挡
     viewer.scene.fxaa = false;
     // 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
@@ -72,8 +74,206 @@ onMounted(()=>{
     //     pitch: Cesium.Math.toRadians(-15.0)
     //   }
     // })
-
     addGeoJson();
+    
+    //设置地理区域和准备变量:
+    var scene = viewer.scene;
+    var globe = viewer.scene.globe;
+    //遍历当前场景中所有的地形瓦片并将相交的瓦片添加到处理列表中。
+    var tilesToProcess = [];
+    var quadtree =
+      viewer.scene.globe._surface._tileProvider._quadtree._tilesToRender;
+    // 遍历地形瓦片
+    quadtree.forEach(function(tile) {
+      tilesToProcess.push(tile);
+      if (tile instanceof Cesium.Cesium3DTileset) return;
+    });
+    const MAX_SHORT = 32767;
+    var terrainProvider=viewer.terrainProvider
+
+    // 创建一个Request对象，这通常是可选的
+    const request = new Cesium.Request({
+      throttle: true,
+      throttleByServer: true
+    });
+
+    // terrain.readyEvent.addEventListener(provider => {
+    //   scene.globe.enableLighting = true;
+      
+    //   terrain.provider.errorEvent.addEventListener(error => {
+    //     alert(`Encountered an error while loading terrain tiles! ${error}`);
+    //   });
+    //   requestMultipleTiles(tileCoords, level, provider)
+    //     .then(allTileData => {
+    //       console.log("所有瓦片的处理结果:", allTileData);
+    //     });
+    // });
+    // 使用requestMultipleTiles请求多个瓦片
+    // terrainProvider.readyPromise.then(() => {
+    //   requestMultipleTiles(tileCoords, level, terrainProvider)
+    //     .then(allTileData => {
+    //       console.log("所有瓦片的处理结果:", allTileData);
+
+    //       // 创建 .obj 文件内容
+    //       let objContent = createObjFileContent(allTileData);
+
+    //       // 触发下载
+    //       download("terrain.obj", objContent);
+    //     });
+    // });
+    // 定义请求单个瓦片数据的函数
+    function requestTileData(x, y, level, terrainProvider) {
+      return terrainProvider.requestTileGeometry(x, y, level)
+        .then(terrainData => {
+          console.log("Terrain tile data for tile " + x + ", " + y + ":", terrainData);
+          return terrainData; // 返回地形数据
+        })
+        .catch(error => {
+          console.error("获取地形数据失败", error);
+        });
+    }
+
+    // 定义请求多个瓦片数据的函数
+    function requestMultipleTiles(tileCoords, level, terrainProvider) {
+      let promises = [];
+
+      for (let tileCoord of tileCoords) {
+        let promise = requestTileData(tileCoord.x, tileCoord.y, level, terrainProvider);
+        promises.push(promise);
+      }
+
+      return Promise.all(promises);
+    }
+
+
+    // 定义要处理的瓦片坐标和级别:
+    const tileCoords = [
+      {x: 6759, y: 1222},
+      {x: 6760, y: 1222},
+      {x: 6761, y: 1222},
+      {x: 6759, y: 1223},
+      {x: 6760, y: 1223},
+      {x: 6761, y: 1223},
+      // 添加更多瓦片坐标
+    ];
+    const level = 12; // 定义级别
+
+    //处理每个瓦片的地形数据，计算出顶点和面。
+    function processTileData(terrainData, tileCoord, level) {
+      const rect = new Cesium.GeographicTilingScheme().tileXYToRectangle(tileCoord.x, tileCoord.y, level);
+      const minimumHeight = terrainData._minimumHeight;
+      const maximumHeight = terrainData._maximumHeight;
+
+      debugger
+      const indices = terrainData._indices;
+      const quantizedVertices = terrainData._quantizedVertices;
+      const vertexCount = quantizedVertices.length / 3;
+
+      const vertices = [];
+      const faces = [];
+      console.log(quantizedVertices)
+      for (let i = 0; i < vertexCount; i++) {
+        
+        const rawU = quantizedVertices[i];
+        const rawV = quantizedVertices[i + vertexCount];
+        const rawH = quantizedVertices[i + vertexCount * 2];
+
+        const u = rawU / MAX_SHORT;
+        const v = rawV / MAX_SHORT;
+
+        const longitude = Cesium.Math.lerp(rect.west, rect.east, u);
+        const latitude = Cesium.Math.lerp(rect.south, rect.north, v);
+        const height = Cesium.Math.lerp(minimumHeight, maximumHeight, rawH / MAX_SHORT);
+        const carto = new Cesium.Cartographic(longitude, latitude, height);
+        const cartesian = Cesium.Cartographic.toCartesian(carto);
+        vertices.push([cartesian.x, cartesian.y, height]);
+      }
+
+      for (let i = 0; i < indices.length; i += 3) {
+        faces.push([indices[i], indices[i + 1], indices[i + 2]]);
+      }
+
+      console.log("Vertices:", vertices);
+      console.log("Faces:", faces);
+
+      // 将 indices 数组展平
+      const flatIndices = [];
+      for (let i = 0; i < indices.length; i++) {
+          flatIndices.push(indices[i]);
+      }
+
+      // 创建一个 Uint16Array
+      const flattenedIndices = new Uint16Array(flatIndices);
+
+      const positions = [];
+
+      // 创建一个空的 Cesium.EntityCollection
+      var entityCollection = new Cesium.EntityCollection();
+
+      for(let i=0;i<faces.length;i++){
+        // 创建一个包含三角形顶点的数组
+        var triangleVertices = [
+          vertices[faces[i][0]][0], vertices[faces[i][0]][1], vertices[faces[i][0]][2]+3700000,
+          vertices[faces[i][1]][0], vertices[faces[i][1]][1], vertices[faces[i][1]][2]+3700000,
+          vertices[faces[i][2]][0], vertices[faces[i][2]][1], vertices[faces[i][2]][2]+3700000];
+      // 定义三个点的笛卡尔坐标
+      var point1 = new Cesium.Cartesian3(triangleVertices[0], triangleVertices[1], triangleVertices[2]);
+      var point2 = new Cesium.Cartesian3(triangleVertices[3], triangleVertices[4], triangleVertices[5]);
+      var point3 = new Cesium.Cartesian3(triangleVertices[6], triangleVertices[7], triangleVertices[8]);
+
+      // 将笛卡尔坐标转换为地理坐标（经纬度）
+      var cartographicPoint1 = Cesium.Cartographic.fromCartesian(point1);
+      var cartographicPoint2 = Cesium.Cartographic.fromCartesian(point2);
+      var cartographicPoint3 = Cesium.Cartographic.fromCartesian(point3);
+      // 获取经度、纬度（以度为单位），以及高度
+      var longitude1 = Cesium.Math.toDegrees(cartographicPoint1.longitude);
+      var latitude1 = Cesium.Math.toDegrees(cartographicPoint1.latitude);
+      console.log(cartographicPoint1.latitude)
+      var height1 = vertices[faces[i][0]][2];
+      var longitude2 = Cesium.Math.toDegrees(cartographicPoint2.longitude);
+      var latitude2 = Cesium.Math.toDegrees(cartographicPoint2.latitude);
+      var height2 = vertices[faces[i][1]][2];
+      var longitude3 = Cesium.Math.toDegrees(cartographicPoint3.longitude);
+      var latitude3 = Cesium.Math.toDegrees(cartographicPoint3.latitude);
+      var height3 = vertices[faces[i][2]][2];
+      viewer.entities.add({
+        name: "三角面",
+        polygon: {
+          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
+            longitude1,
+            latitude1,
+            height1,
+            longitude2,
+            latitude2,
+            height2,
+            longitude3,
+            latitude3,
+            height3,
+          ]),
+          //hierarchy: [point1, point2, point3],
+          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          perPositionHeight: true,
+          material: Cesium.Color.fromCssColorString("#23B8BA").withAlpha(
+            0.3
+          ),
+          outline: true,
+          outlineColor: Cesium.Color.WHITE,
+        }
+      });
+      }
+      viewer.zoomTo(viewer.entities);
+      return { vertices, faces };
+
+    }
+    function requestMultipleTiles(tileCoords, level, terrainProvider) {
+      let promises = [];
+      for (let tileCoord of tileCoords) {
+        let promise = requestTileData(tileCoord.x, tileCoord.y, level, terrainProvider)
+          .then(terrainData => processTileData(terrainData, tileCoord, level));
+        promises.push(promise);
+      }
+      return Promise.all(promises);
+    }
   }
 
   function draw(type) {
@@ -295,6 +495,15 @@ onMounted(()=>{
       });
       window.viewer = viewer;
       window.Cesium = Cesium;
+
+      // 地形显示为线框模式
+      // viewer.scene.globe._surface._tileProvider._debug.wireframe =true
+
+      // 添加瓦片坐标信息,显示当前瓦片的层级、行列号
+      viewer.imageryLayers.addImageryProvider(
+        new Cesium.TileCoordinatesImageryProvider()
+      );
+
   }
 
   function drawTerrian(){
@@ -309,8 +518,10 @@ onMounted(()=>{
           fill:true,
           material: Cesium.Color.fromRandom()
         }),
+        customQuadtreeTiles: q,
       });
     })
+
   }
   function filterTerrian(){
     const positions = window.sourceEntity.polygon.hierarchy._value.positions;
@@ -337,6 +548,118 @@ onMounted(()=>{
     }
     // viewer.entities.
   }
+  function drawTin(){
+      // 创建一个空的 Cesium.EntityCollection
+      var entityCollection = new Cesium.EntityCollection();
+      const MAX_SHORT = 32767;
+      viewer.entities.values.forEach(entity=>{
+        
+        const terrainData = entity._customQuadtreeTiles.data.terrainData._mesh;
+        const rect = new Cesium.GeographicTilingScheme().tileXYToRectangle(entity._customQuadtreeTiles.x, entity._customQuadtreeTiles.y, entity._customQuadtreeTiles.level);
+        const minimumHeight = terrainData.minimumHeight;
+        const maximumHeight = terrainData.maximumHeight;
+
+        const indices = terrainData.indices;
+        const quantizedVertices = terrainData.vertices;
+        const vertexCount = quantizedVertices.length / 3;
+
+        const vertices = [];
+        const faces = [];
+        console.log(quantizedVertices)
+        for (let i = 0; i < vertexCount; i++) {
+          
+          const rawU = quantizedVertices[i];
+          const rawV = quantizedVertices[i + vertexCount];
+          const rawH = quantizedVertices[i + vertexCount * 2];
+
+          const u = rawU / MAX_SHORT;
+          const v = rawV / MAX_SHORT;
+
+          const longitude = Cesium.Math.lerp(rect.west, rect.east, u);
+          const latitude = Cesium.Math.lerp(rect.south, rect.north, v);
+          const height = Cesium.Math.lerp(minimumHeight, maximumHeight, rawH / MAX_SHORT);
+          const carto = new Cesium.Cartographic(longitude, latitude, height);
+          const cartesian = Cesium.Cartographic.toCartesian(carto);
+          vertices.push([cartesian.x, cartesian.y, height]);
+        }
+
+        for (let i = 0; i < indices.length; i += 3) {
+          faces.push([indices[i], indices[i + 1], indices[i + 2]]);
+        }
+
+        console.log("Vertices:", vertices);
+        console.log("Faces:", faces);
+
+        // 将 indices 数组展平
+        const flatIndices = [];
+        for (let i = 0; i < indices.length; i++) {
+            flatIndices.push(indices[i]);
+        }
+
+        // 创建一个 Uint16Array
+        const flattenedIndices = new Uint16Array(flatIndices);
+
+        const positions = [];
+
+       
+
+        for(let i=0;i<faces.length;i++){
+          // 创建一个包含三角形顶点的数组
+          var triangleVertices = [
+          vertices[faces[i][0]][0], vertices[faces[i][0]][1], vertices[faces[i][0]][2]+3700000,
+          vertices[faces[i][1]][0], vertices[faces[i][1]][1], vertices[faces[i][1]][2]+3700000,
+          vertices[faces[i][2]][0], vertices[faces[i][2]][1], vertices[faces[i][2]][2]+3700000];
+          // 定义三个点的笛卡尔坐标
+          var point1 = new Cesium.Cartesian3(triangleVertices[0], triangleVertices[1], triangleVertices[2]);
+          var point2 = new Cesium.Cartesian3(triangleVertices[3], triangleVertices[4], triangleVertices[5]);
+          var point3 = new Cesium.Cartesian3(triangleVertices[6], triangleVertices[7], triangleVertices[8]);
+
+          // 将笛卡尔坐标转换为地理坐标（经纬度）
+          var cartographicPoint1 = Cesium.Cartographic.fromCartesian(point1);
+          var cartographicPoint2 = Cesium.Cartographic.fromCartesian(point2);
+          var cartographicPoint3 = Cesium.Cartographic.fromCartesian(point3);
+          // 获取经度、纬度（以度为单位），以及高度
+          var longitude1 = Cesium.Math.toDegrees(cartographicPoint1.longitude);
+          var latitude1 = Cesium.Math.toDegrees(cartographicPoint1.latitude);
+          console.log(cartographicPoint1.latitude)
+          var height1 = vertices[faces[i][0]][2];
+          var longitude2 = Cesium.Math.toDegrees(cartographicPoint2.longitude);
+          var latitude2 = Cesium.Math.toDegrees(cartographicPoint2.latitude);
+          var height2 = vertices[faces[i][1]][2];
+          var longitude3 = Cesium.Math.toDegrees(cartographicPoint3.longitude);
+          var latitude3 = Cesium.Math.toDegrees(cartographicPoint3.latitude);
+          var height3 = vertices[faces[i][2]][2];
+
+          entityCollection.add({
+            name: "三角面",
+            polygon: {
+              hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
+                longitude1,
+                latitude1,
+                height1,
+                longitude2,
+                latitude2,
+                height2,
+                longitude3,
+                latitude3,
+                height3,
+              ]),
+              //hierarchy: [point1, point2, point3],
+              // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              perPositionHeight: true,
+              material: Cesium.Color.fromCssColorString("#23B8BA").withAlpha(
+                0.3
+              ),
+              outline: true,
+              outlineColor: Cesium.Color.WHITE,
+            }
+          })
+        }
+
+        viewer.dataSources.add(entityCollection);
+      })
+  }
+
 
   function  drawPoint(position, config) {
     let config_ = config ? config : {};
@@ -442,6 +765,7 @@ onMounted(()=>{
             <div class="grid-content bg-purple">
               <el-button type="primary" @click="drawTerrian()">获取视野内的地形</el-button>
               <el-button type="primary" @click="filterTerrian()">过滤地形</el-button>
+              <el-button type="primary" @click="drawTin()">绘制TIN</el-button>
               <!-- <el-button type="primary" @click="draw('polyline')">绘制线</el-button>
               <el-button type="primary" @click="draw('polygon')">绘制面</el-button>
               <el-button type="primary" @click="clearDrawEntities">清空</el-button> -->