cesium支持绘制动态线条以及多个线段

动态线实现方法

• 在传输顶点信息时，同时附加该顶点与线段起始端点之间的距离值，以此距离参数作为依据完成线段的分段处理

  • 在着色器中对所接收的距离值进行取模运算，从而实现按分段绘制不同颜色的效果

  • 利用PolylineColorAppearance结合Fabric创建外观属性后，将该外观的材质替换为Fabric材质。此时可通过color属性获取每个顶点对应的距离信息。至此，已具备按分段绘制线段的能力。若希望使分段线段产生动态效果，可将Cesium绘制的时间参数传递进来，并通过preRender事件（在场景渲染前触发）获取绘制开始的时间点。当前时间与起始时间之差即代表已进行绘制的时间长度。

效果

代码实现

动态线

 createdynamicLine(coordinate1, coordinate2) {

    
       var scene = this.viewer.scene;
    
  
    
       var material = new Cesium.Material({