SuperMap iClient3D for WebGL教程（Entity）- PolylineVolumeGraphics

作者：为梦齐舞

本文同步更新于简书文章[https://www.jianshu.com/p/97ac103cb6d4]
本节课程我们学习最后一个实体对象PolylineVolumeGraphics，线体积对象，它可以通过线数据挤出不同的形状，而成为体数据，比如我们希望在线绘制一根圆形的管道、绘制一堵围墙，那这样对象就能派上大用场了。
首先我们来看一个简单的效果图吧

实现代码如下

function computeCircle(radius) {
					var positions = [];
					for(var i = 0; i < 360; i++) {
						var radians = Cesium.Math.toRadians(i);
						positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
					}
					return positions;
				}
				viewer.entities.add({
					id: "test",
					polylineVolume: {
						positions: Cesium.Cartesian3.fromDegreesArray([117.0, 32.0, 120.0, 36.0, 130.0, 36.0]),
						material: Cesium.Color.YELLOW,
						shape : computeCircle(6000.0),

					}

				});
				viewer.flyTo(viewer.entities.getById("test"));

一、主要参数介绍

接下来我们来了解下PolylineVolumeGraphics的主要参数
1、positions：指定线对象的位置，一个点串对象，里面存储的是Cartesian3对象。
2、shape：要挤出的形状的数组，相当于是对象的切面形状
3、cornerType：角落样式的属性，默认是CornerType.ROUNDED，目前支持以下这种几种风格

4、show：定义对象是否显示。
5、fill：是否用材质进行填充。
6、material：定义材质外观对象
7、material：对象的填充材质，就是对象的外观，可以是颜色，也可以是贴图等等
8、outline：一个布尔属性，指定矩形是否显示轮廓。
9、outlineColor：轮廓的颜色。
10、outlineWidth：轮廓的宽度。
11、shadows：指定矩形是否从每个光源投射或接收阴影。
12、distanceDisplayCondition：即是控制模型在什么相机位置下显示出来。例如设置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000)，即是在相机距离1500-5000的位置范围内显示，其他范围模型都不显示。

二、综合使用

我们这里绘制挤出了三类图形，圆形管道，三角形管道、方形立体盒子，并且为数据都设置了贴图，接下来看下效果吧

实现代码如下：

function computeCircle(radius) {
					var positions = [];
					for(var i = 0; i < 360; i++) {
						var radians = Cesium.Math.toRadians(i);
						positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
					}
					return positions;
				}
				function computeTriangle(radius) {
					var jiaodu=60;
					var hudu= Cesium.Math.toRadians(jiaodu);
					var positions = [];
					positions.push(new Cesium.Cartesian2(-radius*Math.cos(hudu),-radius*Math.sin(hudu)/2));
					positions.push(new Cesium.Cartesian2(radius*Math.cos(hudu),-radius*Math.sin(hudu)/2));
					positions.push(new Cesium.Cartesian2(0,radius*Math.sin(hudu)/2));
					return positions;
				}
				function computeqiang(radius) {
					var positions = [];
					positions.push(new Cesium.Cartesian2(-radius/2,0));
					positions.push(new Cesium.Cartesian2(radius/2,0));
					positions.push(new Cesium.Cartesian2(radius/2,radius*10));
					positions.push(new Cesium.Cartesian2(-radius/2,radius*10));
					return positions;
				}
				viewer.entities.add({
					id: "test",
					polylineVolume: {
						positions: Cesium.Cartesian3.fromDegreesArray([117.0, 32.0, 120.0, 36.0, 130.0, 36.0]),
						material: new Cesium.ImageMaterialProperty({
                            image: "./img/arrow.png",
                            repeat: new Cesium.Cartesian2(200.0, 1.0),
                             }),
						shape : computeCircle(6000.0),

					}
				});
				
				viewer.entities.add({
					id: "test2",
					polylineVolume: {
						positions: Cesium.Cartesian3.fromDegreesArray([117.0, 33.0, 120.0, 37.0, 130.0, 37.0]),
						material: new Cesium.ImageMaterialProperty({
                            image: "./img/arrow.png",
                            repeat: new Cesium.Cartesian2(200.0, 1.0),
                             }),
						shape : computeTriangle(6000.0),

					}
				});
				viewer.entities.add({
					id: "test3",
					polylineVolume: {
						positions: Cesium.Cartesian3.fromDegreesArray([118.0, 33.0, 118.2, 33]),
						material: new Cesium.ImageMaterialProperty({
                            image: "./img/qiang.jpg",
                            repeat: new Cesium.Cartesian2(100.0, 10.0),
                             }),
						shape : computeqiang(6000.0),

					}
				});
				
				viewer.flyTo(viewer.entities.getById("test"));

好了，到这里我们所有的Entity对象都讲解完了，后续将会给大家讲解其他的内容，欢迎关注