Cesium根据飞机飞行姿态添加飘带

Cesium根据飞机飞行姿态添加飘带

  // 计算飘带顶点的函数
  function computeRibbonVertices(
    position: any,
    heading: any,
    pitch: any,
    roll: any,
    length: any,
    width: any
  ) {
    var halfWidth = width / 2;
    let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    // 创建变换矩阵
    var transform = Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpr
    );
    // 计算飘带的起点和终点
    let startPoint = Cesium.Matrix4.multiplyByPoint(
      transform,
      new Cesium.Cartesian3(-length, 0, 0),
      new Cesium.Cartesian3()
    );
    let endPoint = Cesium.Matrix4.multiplyByPoint(
      transform,
      new Cesium.Cartesian3(length, 0, 0),
      new Cesium.Cartesian3()
    );

    // 计算飘带的左右边缘点
    let upVector = new Cesium.Cartesian3(0, 0, 1);
    let forwardVector = Cesium.Cartesian3.normalize(
      Cesium.Matrix4.multiplyByPointAsVector(
        transform,
        new Cesium.Cartesian3(1, 0, 0),
        new Cesium.Cartesian3()
      ),
      new Cesium.Cartesian3()
    );
    // 计算四个顶点
    let leftVector = Cesium.Cartesian3.normalize(
      Cesium.Cartesian3.cross(upVector, forwardVector, new Cesium.Cartesian3()),
      new Cesium.Cartesian3()
    );
    let rightVector = Cesium.Cartesian3.negate(
      leftVector,
      new Cesium.Cartesian3()
    );

    let leftStart = Cesium.Cartesian3.add(
      startPoint,
      Cesium.Cartesian3.multiplyByScalar(
        leftVector,
        width / 2,
        new Cesium.Cartesian3()
      ),
      new Cesium.Cartesian3()
    );
    let rightStart = Cesium.Cartesian3.add(
      startPoint,
      Cesium.Cartesian3.multiplyByScalar(
        rightVector,
        width / 2,
        new Cesium.Cartesian3()
      ),
      new Cesium.Cartesian3()
    );
    let leftEnd = Cesium.Cartesian3.add(
      endPoint,
      Cesium.Cartesian3.multiplyByScalar(
        leftVector,
        width / 2,
        new Cesium.Cartesian3()
      ),
      new Cesium.Cartesian3()
    );
    let rightEnd = Cesium.Cartesian3.add(
      endPoint,
      Cesium.Cartesian3.multiplyByScalar(
        rightVector,
        width / 2,
        new Cesium.Cartesian3()
      ),
      new Cesium.Cartesian3()
    );

    return [leftStart, rightStart, rightEnd, leftEnd];
  } 

  }```

```javascript
  let data = {
    id: "test",
  };
  let lastPos: any = {};
  let entityList: any = {};
  for (var i = 0; i < flightData.length; i++) {
    var position = Cesium.Cartesian3.fromDegrees(
      flightData[i][1],
      flightData[i][2],
      flightData[i][3]
    );
    var heading = Cesium.Math.toRadians(flightData[i][4]);
    var pitch = Cesium.Math.toRadians(360 - flightData[i][6]);
    var roll = Cesium.Math.toRadians(flightData[i][5]);
    // 计算飘带的起点
    if (!entityList[data.id]) {
      let ribbonVertices = computeRibbonVertices(
        position,
        heading,
        pitch,
        roll,
        50,
        2
      );
      lastPos[data.id] = [];
      lastPos[data.id].push(ribbonVertices);
      // 创建飘带的多边形
      entityList[data.id] = [];
      entityList[data.id].push(
        viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.PolygonHierarchy(ribbonVertices),
            material: Cesium.Color.YELLOW.withAlpha(0.5),
            perPositionHeight: true,
          },
        })
      );
      viewer.flyTo(entityList[data.id][0]);
    } else {
      let ribbonVertices = computeRibbonVertices(
        position,
        heading,
        pitch,
        roll,
        50,
        2
      );
      let pos = [
        lastPos[data.id][lastPos[data.id].length - 1][1],
        lastPos[data.id][lastPos[data.id].length - 1][2],
        ribbonVertices[2],
        ribbonVertices[1],
      ];
      lastPos[data.id].push(ribbonVertices);
      entityList[data.id].push(
        viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.PolygonHierarchy(pos.flat(2)),
            material: Cesium.Color.YELLOW.withAlpha(0.5),
            perPositionHeight: true,
          },
        })
      );
    }

有不足之处还请大家多多指教！