cesium绘制轨迹线

• 测试，以下代码未实践，仅仅作为参考

• 笔记一，摘自 https://segmentfault.com/q/1010000044164456

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,
      },
    });
  }
}

• 笔记二 摘自 https://www.jianshu.com/p/a0914067bde3

const points = [
 [lon, lat, height, time],
 [lon, lat, height, time],
];

const newArr1 = []; let newArr2 = [];
    // eslint-disable-next-line array-callback-return
    points.map((item) => {
      newArr1.push(item[0]);
      newArr1.push(item[1]);
      newArr1.push(item[2]);
    });
    newArr2 = newArr1;
    /// map原由fromDegreesArray 所需的数据属于[lon, lat, height, lon, lat, height, ...]
    /// 所以需要map改造
    
    /// 创建线
   const lineDataSource = viewer.scene.primitives.add(new Cesium.PolylineCollection());
   lineDataSource.add({
      width: 2,
      positions: this.Cesium.Cartesian3.fromDegreesArrayHeights(newArr2),
      material: this.Cesium.Material.fromType('Color', {
        color: this.Cesium.Color.fromCssColorString(lineColor),
      }),
    });