cesium 画渐变颜色线

思路：采用 Primitive + colorsPerVertex + colors，并根据点的索引对colors进行插值

function interpolateColor(color1, color2, ratio) {
    return new Cesium.Color(
        Cesium.Math.lerp(color1.red, color2.red, ratio),
        Cesium.Math.lerp(color1.green, color2.green, ratio),
        Cesium.Math.lerp(color1.blue, color2.blue, ratio),
        1.0
    );
}

const red = Cesium.Color.RED;
const green = Cesium.Color.GREEN;
const blue = Cesium.Color.BLUE;
const segmentColors = [];
for (let i = 0; i < positionArr.length; i++) {
    // 前半段：红->绿
    if (i < 49) {
        const ratio = i / 49;
        segmentColors.push(
            interpolateColor(red, green, ratio), // start
        );
    } else {
        // 后半段：绿->蓝
        const ratio = (i - 49) / positionArr.length;
        segmentColors.push(
            interpolateColor(green, blue, ratio),
        );
    }
}

const polyline = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
            positions: positions,
            vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
            colors: segmentColors,
            colorsPerVertex: true,
            width: 5
        })
    }),
    appearance: new Cesium.PolylineColorAppearance({
        translucent: false // 如果需要透明渐变，设为 true
    }),
    asynchronous: false
});

viewer.scene.primitives.add(polyline);