本文共 2236 字，大约阅读时间需要 7 分钟。

作者：为梦齐舞

本文同步更新于简书文章[]

本节继续学习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://cjvxi.baihongyu.com/