SuperMap iClient3D for WebGL教程（Entity）-WallGraphics

作者：为梦齐舞

本文同步更新于简书文章[https://www.jianshu.com/p/61e6efd66b44]
本节我们来一起学习下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])
效果如下：

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，给我们围成的框加个顶，让他变为一个盒子，通过这个结合我们可以来拉伸一些白模的建筑。并且我们开启泛光，让盒子有点发光的感觉。
效果如下：

具体实现代码如下：

                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
					}
				});