[Cesium] 使用primitive绘制多段线

cesium里面绘制点线面可以通过entity或者primitive。今天先记录下使用primitive绘制线的代码

      //创建多段线和每段颜色
      let startLng = 100.96366875932624;
      let startLat = 37.466150138169006;

      const positions = [];
      const colors = [];
      for (let j = 0; j <= 50; j += 5) {
          positions.push(
              Cesium.Cartesian3.fromDegrees(startLng + j, startLat, 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
      this.viewer.scene.primitives.add(
          new Cesium.Primitive({
              geometryInstances: [perSegmentPolyline, perVertexPolyline],
              appearance: new Cesium.PerInstanceColorAppearance({
                  flat: true,
                  renderState: {
                      lineWidth: Math.min(2.0, this.viewer.scene.maximumAliasedLineWidth),
                  },
              }),
          })
      );