cesium 如何用Primitive来实现绘制实时显示的大量轨迹线和轨迹点？

Question

let polylineEntity = null;
let entityList = [];
let positionsArray = [];
function pointPolyline(positions, labelText) {
  const cartesian3Array = [];
  positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]);
  // 移除之前的实体点
  for (const entity of entityList) {
    viewer.entities.remove(entity);
  }
  entityList = [];
  for (const position of positions) {
    let entityIndex = entityList.length;
    const cartesian3 = Cesium.Cartesian3.fromDegrees(
      position.longitude,
      position.latitude,
      0.02
    );
    const pointLabel = new Cesium.Entity({
      position: cartesian3,
      point: {
        pixelSize: 10,
        color: Cesium.Color.BLUE,
        show: checkedPoint.value,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 1,
      },
      label: {
        text: labelText,
        font: '14pt monospace',
        show: new Cesium.CallbackProperty(() => {
          return entityIndex === entityList.length - 1;
        }, false),
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9),
        fillColor: Cesium.Color.WHITE,//标签的文本填充颜色。
        outlineColor: Cesium.Color.WHITE,//标签的文本轮廓颜色。
      },
    });
    entityList.push(pointLabel);
    viewer.entities.add(pointLabel);
    cartesian3Array.push(cartesian3);
  }

  // 更新轨迹线位置
  if (polylineEntity) {
    polylineEntity.polyline.positions = new Cesium.CallbackProperty(() => {
      return Cesium.Cartesian3.fromDegreesArray(positionsArray);
    }, false);
    polylineEntity.polyline.show = checkedLines.value;
  } else {
    // 创建新的轨迹线
    polylineEntity = viewer.entities.add({
      polyline: {
        positions: new Cesium.CallbackProperty(() => {
          return Cesium.Cartesian3.fromDegreesArray(positionsArray);
        }, false),
        width: 15,
        // show: checkedLines.value,
        material: Cesium.Color.RED,
      },
    });
  }
}

大佬们，请问如何根据后台返回的数据，通过new Cesium.Primitive（）进行绘制？

Answer 1

const positions = [
  {
    "pos_lat": 30.57401621295078,
    "pos_lon": 104.22444664497841,
  },
  {
    "pos_lat": 30.57401693673619,
    "pos_lon": 104.22444659579061,
  },
  // ...
];


const cartesianPositions = positions.map(pos => {
  return Cesium.Cartesian3.fromDegrees(pos.longitude, pos.latitude);
});

const polylineGeometry = new Cesium.PolylineGeometry({
  positions: cartesianPositions,
  width: 15.0,
  vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT
});

const geometryInstance = new Cesium.GeometryInstance({
  geometry: polylineGeometry,
  attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
  }
});

const polylinePrimitive = new Cesium.Primitive({
  geometryInstances: geometryInstance,
  appearance: new Cesium.PolylineColorAppearance()
});

viewer.scene.primitives.add(polylinePrimitive);