记录一下用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),
},
}),
})
);
结果