Cesium.js中Polyline可以怎么玩？花样有多少？

Cesium.js提供了许多功能来绘制可视化地球表面上的各种几何图形。其中之一是Polyline，它用于绘制线段或折线。

以下是我整理记录的相关资料，帮助自己更好地接收了解 Cesium.Polyline 的使用。

绘制一条彩虹线

1. 创建一定范围的点位数据，和等量的颜色数据
2. 通过点位和颜色数据，生成Cesium.GeometryInstance表面几何体
3. 设置Cesium.PerInstanceColorAppearance信息来呈现渲染效果
4. 通过geometryInstances和appearance来创建一个新的Primitive

let positions = [];
let colors = [];

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

const primitive = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      // 几何实例
      geometry: new Cesium.SimplePolylineGeometry({
        positions: positions,
        colors: colors,
      }),
    }),
    appearance: new Cesium.PerInstanceColorAppearance({
      // 几何外观
      flat: true,
      renderState: {
        lineWidth: Math.min(40.0, viewer.scene.maximumAliasedLineWidth),
      },
    }),
});
viewer.scene.primitives.add(primitive);

相关资料

• Cesium
• Cesium Documentation