动态线实现

• 传递顶点时，附加每个顶点距线段起点的距离，用此距离来实现线段分段

• shader中对传入的距离取模，即可实现分段绘制不通的颜色

• PolylineColorAppearance + Fabric 创建Appearance后，将appearance的材质替换为fabric，此时可以通过color获取每个顶点对应的距离。此时已经可以分段绘制线段了。分段的线要动起来，可以传入Cesium绘制的时间，通过preRender(在场景渲染之前触发)事件可以获取绘制的起始事件，当前时间减起始时间即为已经开始绘制的时间。

效果

代码实现

动态线

createdynamicLine(coordinate1, coordinate2) {var scene = this.viewer.scene;var material = new Cesium.Material({fabric: {uniforms: {u_itime: 10.0,  //时间u_trailpercent: 0.3,  //拖尾百分比u_trailmovespeed: 5.0 / 50.0,  //速率}}});var primitive = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({geometry: new Cesium.PolylineGeometry({// positions: Cesium.Cartesian3.fromDegreesArray([// 119.196653,// 26.031937,// 159.196653,// 26.031937,// ]),positions: Cesium.Cartesian3.fromDegreesArrayHeights([coordinate1.Longitude,//线的初始经纬度coordinate1.latitude,coordinate1.height,//高度coordinate2.Longitude,//结束位置coordinate2.latitude,coordinate2.height,//高度]),width: 3.0,vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,colorsPerVertex: true,colors: [new Cesium.Color(0.1, 0.0, 0.0, 1.0),new Cesium.Color(0.7, 0.0, 0.0, 1.0),new Cesium.Color(1.0, 0.0, 0.0, 1.0),  //Alpha通道是计算机图形学中的术语，指的是特别的通道，意思是“非彩色”通道，主要是用来保存选区和编辑选区//Alvy Ray Smith 提出每个像素再增加一个 Alpha 通道，取值为0到1，//用来储存这个像素是否对图片有「贡献」，0代表透明、1代表不透明。],}),}),appearance: new Cesium.PolylineColorAppearance({  //设置线的颜色变化translucent: false,fragmentShaderSource: `precision highp float;varying vec4 v_color;void main(){float r=v_color.r-u_itime_0*u_trailmovespeed_2;float dist=smoothstep(0.0,u_trailpercent_1,mod(r,u_trailpercent_1));gl_FragColor=mix(vec4(1.0,0.0,1.0,1.0),vec4(0.0,1.0,1.0,1.0),dist);}`,}),});primitive.appearance.material = material;scene.primitives.add(primitive);scene.preRender.addEventListener(function (s, t) {  //预渲染监听  该事件发生在每次渲染之前let elaspTime = Cesium.JulianDate.now().secondsOfDay - t.secondsOfDay;primitive.appearance.material.uniforms.u_itime = elaspTime;});},

多段线

createline() {//创建多段线和每段颜色this.positions = [];this.colors = [];for (let j = 0; j <= 50; j++) {this.positions[j] = (Cesium.Cartesian3.fromDegrees(124.0 + j, 40, 50000.0));// this.colors[j] = (Cesium.Color.ORANGE);this.colors[j] = (Cesium.Color.fromRandom({ alpha: 1.0 }));}//设置线段的位置和颜色，一一对应，arcType为ArcType.NONEconst perSegmentPolyline = new Cesium.GeometryInstance({geometry: new Cesium.SimplePolylineGeometry({positions: this.positions,colors: this.colors,arcType: Cesium.ArcType.NONE,}),});//使用逐顶点着色绘制多段线//对于逐顶点着色，将colorsPerVertex选项设置为true，并为colors选项提供长度等于位置数的颜色数组const perVertexPolyline = new Cesium.GeometryInstance({geometry: new Cesium.SimplePolylineGeometry({positions: Cesium.Cartesian3.fromDegreesArray([-130, 40, -80, 30]),colors: this.colors,colorsPerVertex: true,}),});//添加多段线instances到primitives  entity方式绘制对象，和Primitive方式this.viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [perSegmentPolyline, perVertexPolyline], //几何形状appearance: new Cesium.PerInstanceColorAppearance({    //外观flat: true,renderState: {lineWidth: Math.min(2.0, this.viewer.scene.maximumAliasedLineWidth),},}),}));},