- SuperMap iClient3D for WebGL教程 轨
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
- SuperMap iClient3D for WebGL教程(E
PolygonGraphics类是隶属于实体对象的一个类型,主要用于创建几何面对象和对面对象拉伸为盒子模型,数据的来源为点串数据。添加拉伸后的面实体效果如下图:
![](https://img.haomeiwen.com/i15511619/bafbf8578f6edc02.png)
实现代码如下:
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 类型的对象,里面可以创建普通面和导洞对象。
![](https://img.haomeiwen.com/i15511619/ce6c5969b1b17d21.png)
2、height:多边形相当地面的高度。
3、extrudedHeight:多边形的寄出高度,一般多边形的拉升高度=extrudedHeight-height。
4、show:多边形是否可见
5、fill:是否使用材质填充,不填充则是透明,如果有边线则只显示边线效果
![](https://img.haomeiwen.com/i15511619/805b46c24e0e40cd.png)
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"));
效果如下图:
![](https://img.haomeiwen.com/i15511619/a93af34fad9d2f3c.png)
网友评论