cesium中利用矢量数据借助wall实现人工建模流程

项目场景：

例如：运用在人工建模的流程中，需要设置需要设计的人工建模的墙体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]}))
        }
    }

模型贴图：

提示：这里填写该问题的具体解决方案：

例如：根据实际要求创建需要模型的形状，可以根据绘制的类型的要求，随意设计模型，但是首要要求是模型建模的后台程序必须支持，同时模型中的墙体和顶层可以实现贴图：