fix:update the part of terrian data
This commit is contained in:
user
parent
8ed92a3e84
commit
da05acbf28
|
|
@ -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<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> -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue