SuperMap iClient3D for WebGL教程（Entity）-PolygonGraphics

PolygonGraphics类是隶属于实体对象的一个类型，主要用于创建几何面对象和对面对象拉伸为盒子模型，数据的来源为点串数据。添加拉伸后的面实体效果如下图:

PolygonGraphics

实现代码如下：

viewer.entities.add({
                    id: "test",
                    polygon: {
                        hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112, 40, 112.01, 40, 112.01, 40.01, 112, 40.01])),
                        height:300,
                        extrudedHeight:2000,
                        material:Cesium.Color.RED.withAlpha(0.5),
                        outline:true,
                        outlineColor:Cesium.Color.WHITE,
                        outlineWidth:2.0
                    }
                });
                viewer.flyTo(viewer.entities.getById("test"));

一、主要参数介绍

1、hierarchy：多边形的点集合串，是一个PolygonHierarchy 类型的对象，里面可以创建普通面和导洞对象。

导洞的效果

2、height：多边形相当地面的高度。
3、extrudedHeight：多边形的寄出高度，一般多边形的拉升高度=extrudedHeight-height。
4、show：多边形是否可见
5、fill：是否使用材质填充，不填充则是透明，如果有边线则只显示边线效果

无填充模式

6、material：对象的填充材质，就是对象的外观，可以是颜色，也可以是贴图等等，后续的文章会讲解
7、outline：对象是否显示边线

8、outlineColor：边线的颜色
9、outlineWidth：边线的宽度
10、stRotation：材质的旋转角度
11、perPositionHeight：是否单独使用对象的高度，也就是每个节点的高度可显示，这样可以做一个倾斜的平面
12、closeTop：拉伸的时候顶部是否封口
13、closeBottom：拉伸的时候底部是否封口
14、shadows：阴影投射方式
15、distanceDisplayCondition：即是控制模型在什么相机位置下显示出来。例如设置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000)，即是在相机距离1500-5000的位置范围内显示，其他范围模型都不显示。

二、综合使用

详细大家看到这里，怎么添加entity都已经会了，这里不再做多的讲解，我们添加一个带有洞的多边形，拉伸他并给他贴一个图片材质

viewer.entities.add({
                    id: "test",
                    polygon: {
                        hierarchy: {
                            positions: Cesium.Cartesian3.fromDegreesArray([112, 40, 112.01, 40, 112.01, 40.01, 112, 40.01]),
                            holes:[new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([112.001, 40.001, 112.009, 40.001, 112.009, 40.006, 112.001, 40.006]))]
                        },
                        height: 300,
                        extrudedHeight: 2000,
                        material: new Cesium.ImageMaterialProperty ({
                            image:"data/building2.png"
                        }),
                        outline: true,
                        outlineColor: Cesium.Color.WHITE,
                        outlineWidth: 2.0,
                        
                    }
                });
                viewer.flyTo(viewer.entities.getById("test"));

效果如下图：

综合使用