SuperMap iClient3D for WebGL教程（E

本节继续学习PolylineGraphics对象，这个是一个折线类型，可以根据坐标直接添加到场景中，也可以对折线设置一定的风格符号，接下来我们一起学习下吧。
首先来看一个折线的尾迹线效果

m11.gif

实现代码如下：

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图片，参数见下图

PolylineTrailMaterialProperty参数

主要参数有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带箭头的线，效果如下图

image.png

实现的材质代码为：

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发光线的材质做模拟的道路数据

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