cesium系列8：多颜色线段的折线实现方法

一、背景

想在项目中实现不同颜色的一段折线的效果，找了些资料，看了api，最终将实现方法记录如下

二、结果

 三、实现步骤

3.1方法一

使用SimplePolylineGeometry 方法

主要写法如下

var positions = [];
var colors = [];
 
for ( var i = 0; i < 40; ++i) {
    positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 48.0));
    colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
}

primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.SimplePolylineGeometry({
            positions : positions,
            colors : colors
        })
    }),
    appearance : new Cesium.PerInstanceColorAppearance({
        flat : true,
        renderState : {
            // Override the appearance render state to change the
            // line width on system's that support it (Linx/Mac).
            lineWidth : Math.min(4.0, scene.maximumAliasedLineWidth)
        }
    })
}));

或者

createline(){
        //创建多段线和每段颜色
        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),
                    },
                }),
            })
        );

    }

 里面的数据是随机的，可以根据自己的数据进行修改，效果就是上图一的那种有颜色的折线

缺点：不能修改线段的宽度

如何在CesiumJS中将宽度设置为SimplePolylineGeometry原语

 3.2方法2

polyline with per vertex colors

// create a polyline with per vertex colors
var positions = [];
var colors = [];
for (var i = 0; i < 40; ++i) {
    positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 9.0));
    colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
}

primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.PolylineGeometry({
            positions : positions,
            width : 10.0,
            vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT,
            colors : colors,
            colorsPerVertex : true
        })
    }),
    appearance : new Cesium.PolylineColorAppearance()
}));

 显示结果，下图或者开头的图2

3.3更多

3.3.1 polyline with per segment colors

// create a polyline with per segment colors
var positions = [];
var colors = [];
for (var i = 0; i < 40; ++i) {
    positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 12.0));
    colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
}

primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.PolylineGeometry({
            positions : positions,
            width : 10.0,
            vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT,
            colors : colors
        })
    }),
    appearance : new Cesium.PolylineColorAppearance()
}));

显示：

四、参考文章

Cesium快速上手6-Primitive图元的讲

cesium-PolylineGeometry 使用PerInstanceColorAppearance 无效_A873054267的博客-优快云博客