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

原创

已于 2023-08-09 15:51:04 修改 · 3.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #SimplePolyline

于 2021-10-20 20:15:04 首次发布

本文介绍了在CesiumJS中创建带颜色的折线的两种方法：SimplePolylineGeometry和PolylineGeometry。通过示例代码展示了如何设置线段颜色和宽度，并提供了随机颜色和固定宽度的示例。然而，SimplePolylineGeometry无法修改线宽，而PolylineGeometry可以设置线宽并支持顶点或段落颜色。参考本文，可以根据自己的数据定制彩色折线效果。

一、背景

想在项目中实现不同颜色的一段折线的效果，找了些资料，看了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 : {
            // Overr