项目场景:
例如:运用在人工建模的流程中,需要设置需要设计的人工建模的墙体wall的高度,以及模型的wall的宽度,从而建设模型的初步样式
绘制墙体结构
例如:墙体属于嵌套型矢量数据
演示图:
演示代码:绘制初步的墙体以及页面交互显示墙体设置模块
const drawWallData = () => {
let action = draw.create(DrawType.Polygon, {useDefaultEntity: true});
action.on(DrawEventType.Complete, async (evt) => {
cc=[];
mh=[];
dd=[]
minh=[];
action.clearEntity();
evt.push(evt[0])
let aa: Cartographic[] = [];
evt.map((v: Cartesian3) => {
aa.push(Cartographic.fromCartesian(v))
})
let result = await sampleTerrainMostDetailed(view?.terrainProvider as TerrainProvider, aa);
for (var i = 0; i < result.length; i++) {
mh.push(1 + result[i].height)
minh.push(result[i].height)
let lng = CesiumMath.toDegrees(result[i].longitude)
let lat = CesiumMath.toDegrees(result[i].latitude)
cc.push(lng, lat, result[i].height +1);
dd.push({x:lng,y:lat,z:result[i].height + 1})
}
handleAdd(evt);
});
}
const handleAdd = (evt: any) => {
const newData = {
key: `${tableData.length + 1}`,
buildingName: '3',
textureName: `${tableData.length + 1}`,
positions: dd,
wallPosition:evt,
maxHeight:mh,
minHeight:minh,
};
dataSource.entities.add({
name: 'wall',
wall: {
maximumHeights: mh,
minimumHeights: minh,
positions: evt,
material: new ImageMaterialProperty({
image: building,
repeat: new Cartesian3(10, 2)
}),
outline: true,
outlineColor: Cesium.Color.BLACK,
outlineWidth:5,
},
});
dataSource.entities.add({
id: `지붕${newData.key}`,
polygon: {
hierarchy: new PolygonHierarchy(Cartesian3.fromDegreesArrayHeights(cc)),
material:Cesium.Color.fromCssColorString('rgba(24,151,202,0.2)'),
perPositionHeight: true,
heightReference: HeightReference.RELATIVE_TO_GROUND,
}
});
setTableData([...tableData, newData]);
};
生成模型
例如:根据设置的墙体的高度,以及模型层数,从而自动创建模型的顶层面
演示图:
演示代码:属于自动化拔高墙体的初步模型
const addBuilding = () => {
clearWall();
uploadWall();
if (tableData.length>0){
let newData:any[] = [];
let changePolygon:any[] =[];
let firstHeight=0;
let floorHeight=0;
let cumulativeHeight = 0;
let count = 1;
let wallData:any[]=[];
let previousMaximumHeights: any = null;
tableData.forEach((item,index)=>{
firstHeight +=(Number(item.buildingName)*Number(item.textureName));
if (Number(item.textureName)>0 && item.positions.length>0){
for (let i=0;i<Number(item.textureName);i++){
floorHeight =(Number(item.buildingName)*(i+1)+cumulativeHeight)
let maxHeight: any[]=[];
let minHeight: any[]=[];
if (item.maxHeight.length>0){
item.maxHeight.forEach((item1: any)=>{
maxHeight.push(item1+floorHeight)
})
}
if (item.minHeight.length>0){
item.minHeight.forEach((item1: any)=>{
minHeight.push(item1+cumulativeHeight)
})
}
let positionData:any[] = [];
item.positions.forEach((item2: {x:any, y: any,z:any})=>{
let data = Cesium.Cartesian3.fromDegrees(item2.x,item2.y,item2.z+floorHeight)
positionData.push(data)
})
let objWall = {
wallKey:count + i,
position:positionData,
maximumHeights: maxHeight,
minimumHeights:minHeight,
height:Number(item.buildingName)
}
wallData.push(objWall)
}
count += Number(item.textureName);
cumulativeHeight += (Number(item.buildingName) * Number(item.textureName));
}
// @ts-ignore
if (dataSource.entities._entities._array.length>0){
// @ts-ignore
dataSource.entities._entities._array.forEach((item1: {_name:string; _id: string; wall: { maximumHeights: any[]; minimumHeights: any[] } })=>{
if (item1._id=== `지붕${item.key}`){
let newPositon: any[] = [];
item.positions.forEach((item3: { z: number; x: any; y: any })=>{
let newItem = Object.assign({}, item3);
newItem.z = newItem.z + firstHeight;
newPositon.push(newItem.x, newItem.y, newItem.z);
})
// @ts-ignore
item1.polygon.hierarchy = new Cesium.PolygonHierarchy(Cartesian3.fromDegreesArrayHeights(newPositon));
// @ts-ignore
item1.polygon.material=Cesium.Color.fromCssColorString('rgba(111,115,117,0.5)');
let polygonData ={
key:`지붕${item.key}`,
floorName:`지붕${item.key}`,
imgName:'',
imgUrl:'',
height:firstHeight,
}
changePolygon.push(polygonData)
}
});
}
});
setWallData1(wallData)
wallData.forEach((wall,index)=>{
let obj ={
key:wall.wallKey,
floorName:'그룹'+wall.wallKey,
imgName:'',
imgUrl:'',
height: wall.height,
}
newData.push(obj);
dataSource.entities.add({
id: '그룹'+wall.wallKey,
wall: {
maximumHeights: wall.maximumHeights,
minimumHeights:index===0?wall.minimumHeights:previousMaximumHeights,
positions: wall.position,
material: Cesium.Color.fromCssColorString('rgba(111,115,117,0.5)'),
outline: true,
outlineColor: Cesium.Color.fromCssColorString('rgba(12,12,12,1)'),
outlineWidth:5,
},
polyline: {
positions: wall.position,
width: 5,
material: Cesium.Color.fromCssColorString('rgba(12,12,12,1)'),
granularity: Cesium.Math.PI_OVER_FOUR,
}
});
previousMaximumHeights = wall.maximumHeights;
})
dispatch(setState({imageTableData:[...newData,...changePolygon]}))
}
}
模型贴图:
提示:这里填写该问题的具体解决方案:
例如:根据实际要求创建需要模型的形状,可以根据绘制的类型的要求,随意设计模型,但是首要要求是模型建模的后台程序必须支持,同时模型中的墙体和顶层可以实现贴图: