diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index cfa5f90..19c5310 100644 --- a/src/components/HelloWorld.vue +++ b/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({ - requestWaterMask: true, - requestVertexNormals: true - }) + // terrain: Cesium.Terrain.fromWorldTerrain({ + // requestWaterMask: true, + // requestVertexNormals: true + // }) }) // 添加Cesium ion的地形 - // viewer.scene.setTerrain( - // new Cesium.Terrain( - // Cesium.CesiumTerrainProvider.fromIonAssetId(1), - // ), - // ); + const terrain = new Cesium.Terrain( + 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 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{
获取视野内的地形 过滤地形 + 绘制TIN