美文网首页Cesium
SuperMap iClient3D for WebGL教程(E

SuperMap iClient3D for WebGL教程(E

作者: 为梦齐舞 | 来源:发表于2019-06-13 09:51 被阅读0次

    本节我们来一起学习下WallGraphics这个对象,这个对象也是属于Entity是他对象的,Wall是一个墙对象,可以沿着地面或海拔高度进行放置,是竖立着加载到场景中的,我们来看一个使用Wall做的效果


    简单的墙

    代码如下:

    viewer.entities.add({
                        id: "test0",
                        wall:{
                            positions:Cesium.Cartesian3.fromDegreesArray([112, 40, 112.001, 40]),
                            maximumHeights:[90,90],
                            material:new Cesium.ImageMaterialProperty({image:'./media/building.png',transparent:true}),
                        }
                        
                    });
    

    接下来我们来详细了解下WallGraphics的参数

    一、主要参数介绍

    1、positions:墙的坐标信息,一个包含Cartesian3笛卡尔坐标系的数组对象,它决定了墙对象的位置和高度。我们设置为Cesium.Cartesian3.fromDegreesArrayHeights([112, 40,90, 112.001, 40,20])
    效果如下:


    positions

    2、maximumHeights:对象的最大高度数组,设置positions中每个点对于的高度,一个点对应一个值,当设置maximumHeights后,positions中设置的高度值将无效。
    3、minimumHeights:对象的最小高度数组,同样是和positions中的点一一对应,他决定墙对象的底部高程,不设置时,默认都是0。
    4、material:材质对象,可以对墙对象赋予材质例如上面用到的图片。
    5、outline:是否显示边框。
    6、outlineColor:边框的颜色。
    7、outlineWidth:边框的宽度。
    8、shadows:光照阴影的方式。
    9、distanceDisplayCondition:即是控制模型在什么相机位置下显示出来。例如设置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000),即是在相机距离1500-5000的位置范围内显示,其他范围模型都不显示。每个enitty对象都有类似的属性

    二、综合使用

    我们用四个WallGraphics对象围成了一个简单的框,并为它设置了图片材质
    当然我们也可以结合上一节讲到的PolygonGraphics,给我们围成的框加个顶,让他变为一个盒子,通过这个结合我们可以来拉伸一些白模的建筑。并且我们开启泛光,让盒子有点发光的感觉。
    效果如下:


    加了顶的WallGraphics

    具体实现代码如下:

                    viewer.entities.add({
                        id: "test0",
                        wall:{
                            positions:Cesium.Cartesian3.fromDegreesArrayHeights([112, 40,90, 112.001, 40,90]),
                            material:new Cesium.ImageMaterialProperty({image:'./media/building.png',transparent:true})
                        }
                        
                    });
                    viewer.entities.add({
                        id: "test1",
                        wall:{
                            positions:Cesium.Cartesian3.fromDegreesArrayHeights([112.001, 40,90, 112.001, 40.001,90]),
                            material:new Cesium.ImageMaterialProperty({image:'./media/building.png',transparent:true})
                        }
                    });
                    viewer.entities.add({
                        id: "test2",
                        wall:{
                            positions:Cesium.Cartesian3.fromDegreesArrayHeights([112.001, 40.001,90, 112, 40.001,90]),
                            material:new Cesium.ImageMaterialProperty({image:'./media/building.png',transparent:true})
                        }
                    });
                    viewer.entities.add({
                        id: "test3",
                        wall:{
                            positions:Cesium.Cartesian3.fromDegreesArrayHeights([112, 40.001,90, 112, 40,90]),
                            material:new Cesium.ImageMaterialProperty({image:'./media/building.png',transparent:true})
                        }
                    });
                    
                    viewer.entities.add({
                        id: "top",
                        polygon:{
                            hierarchy:Cesium.Cartesian3.fromDegreesArrayHeights([112, 40,90, 112.001, 40,90,112.001, 40.001,90,112, 40.001,90]),
                            material:new Cesium.ImageMaterialProperty({image:'./media/building.png',transparent:true}),
                            perPositionHeight:true
                        }
                    });
    

    相关文章

      网友评论

        本文标题:SuperMap iClient3D for WebGL教程(E

        本文链接:https://www.haomeiwen.com/subject/pclaxctx.html