SuperMap iClient3D for WebGL教程（Entity）-PolylineGraphics

作者：为梦齐舞

本文同步更新于简书文章[https://www.jianshu.com/p/ac63fdfeb5b1]
本节继续学习PolylineGraphics对象，这个是一个折线类型，可以根据坐标直接添加到场景中，也可以对折线设置一定的风格符号，接下来我们一起学习下吧。
首先来看一个折线的尾迹线效果

实现代码如下：

viewer.entities.add({
					id: "test",
					polyline: {
						positions: Cesium.Cartesian3.fromDegreesArrayHeights([101, 40, 50000, 119, 40, 50000]),
						width:8.0,
						material: new Cesium.PolylineTrailMaterialProperty({
							color: Cesium.Color.RED.withAlpha(0.9),
							trailLength: 0.4,
							period: 1.0
						})
					}

				});

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

一、主要参数介绍

1、positions：折线的点串信息，一组Cartesian3的数组。
2、followSurface：表示线的显示方式是按照地球曲率显示为弧线，还是直接的线型连接。默认是true显示为弧线。下面两图是效果对比。

直线

弧线

3、width：表示线的宽度，以像素为单位。
4、show：表示折线对象是否可见
5、material：折线的材质，向文章开头的图就是我们使用了尾迹线的材质，才有了动态的效果。
6、clampToGround：设置线对象是否贴地，设置此对象时，arcType必须为Cesium.ArcType.GEODESIC或Cesium.ArcType.RHUMB，不能是不符合椭圆体的表面的直线。
7、depthFailMaterial：当折线低于地形时用于绘制折线的材质，
8、zIndex：指定用于排序地面几何的zIndex。只有当clampToGround为真时才有效。

二、Polyline的材质介绍

Polyline支持多种类型的材质，这里我们主要介绍折线对象支持的材质类型，关于其他的材质，我们在后续的文章中会详细进行介绍。
1、PolylineTrailMaterialProperty尾迹线材质，效果见文章开始的gif图片，参数见下图

主要参数有color：可以设置尾迹线的颜色
trailLength：尾迹线的长度在整条线中占的比例，默认值为0.3，一般不建议设置太大，太大就没有动态的效果了；
constantSpeed：运动的速度；
period：运动的周期；
周期和速度只设置其中一个就可以了。
2、PolylineGlowMaterialProperty发光线，效果如下:

实现的材质代码为：

new Cesium.PolylineGlowMaterialProperty({
							glowPower: 0.5,
							color: Cesium.Color.BLUE
						})

glowPower:为发光强度，color为发光的颜色

3、PolylineOutlineMaterialProperty 带轮廓的线，从效果图可以看出轮廓线个发光线有本质的区别，效果如下：

实现的材质代码为：

new Cesium.PolylineOutlineMaterialProperty({
							color: Cesium.Color.BLUE,
							outlineWidth: 10,
							outlineColor: Cesium.Color.RED
						})

4、PolylineArrowMaterialProperty带箭头的线，效果如下图

实现的材质代码为：

new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)

5、PolylineDashMaterialProperty 虚线样式的折线，效果如下图

虚线的材质代码为:

new Cesium.PolylineDashMaterialProperty({
							color:Cesium.Color.RED,
							gapColor:Cesium.Color.TRANSPARENT,
							dashLength:20,
							dashPattern:255
						})

其中gapColor为虚线的间隙颜色，dashLength为虚线间隙的长度

我们可以将虚线部分显示出来，那么可以做成间隔线的样式，如下图：

间隔线的材质代码为：

new Cesium.PolylineDashMaterialProperty({
							color:Cesium.Color.RED,
							gapColor:Cesium.Color.BLUE,
							dashLength:100,
							dashPattern:2
						})

好了，Polyline的材质介绍就先到这里

三、综合使用

首先来看一张效果图，这个是通过PolylineGlowMaterialProperty发光线的材质做模拟的道路数据

具体代码可以参见示例代码：http://support.supermap.com.cn:8090/webgl/examples/editor.html#polylineGlow