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),
            },
        }),
    })
);

結果