cesium绘制不同颜色的多段线（SimplePolylineGeometry）

记录一下用SimplePolylineGeometry绘制不同颜色的多段线，代码看下面

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

结果