Homepage

Appearance

概述 ​

对于模型的运动轨迹，还需要考虑到模型的朝向问题，即轨迹改变了方向，模型方向也要跟着改变。

  • 调整模型本身朝向
  • 通过代码实现自定义朝向
javascript
const timeStepInSeconds = 30
const totalSeconds = timeStepInSeconds * (flightData.length - 1)
const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z")
const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate())
viewer.clock.startTime = start.clone()
viewer.clock.stopTime = stop.clone()
viewer.clock.currentTime = start.clone()
viewer.clock.multiplier = 50
viewer.clock.shouldAnimate = true
viewer.timeline.zoomTo(start, stop)

const positionProperty = new Cesium.SampledPositionProperty()

for (let i = 0; i < flightData.length; i++) {
  const dataPoint = flightData[i]
  const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate())
  const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height)
  positionProperty.addSample(time, position)
  viewer.entities.add({
    description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
    position,
    point: { pixelSize: 10, color: Cesium.Color.RED }
  })
}

// 默认朝向
const velocityOrientation = new Cesium.VelocityOrientationProperty(positionProperty)
// 绕Z轴旋转180度
const fixHeading = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(180))
// 自定义朝向
const orientation = new Cesium.CallbackProperty((time, result) => {
 const baseQuat = velocityOrientation.getValue(time, result)
 if (!baseQuat) return result
 // 把 baseQuat 转成矩阵
 const rotMatrix = Cesium.Matrix3.fromQuaternion(baseQuat)
 // 乘上修正矩阵
 const finalMatrix = Cesium.Matrix3.multiply(rotMatrix, fixHeading, new Cesium.Matrix3())
 // 再转回四元数
 return Cesium.Quaternion.fromRotationMatrix(finalMatrix, result)
}, false)

const airplaneEntity = viewer.entities.add({
  availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]),
  position: positionProperty,
  model: {
    uri: '/models/plane.glb',
    minimumPixelSize: 100,
    maximumScale: 100,
  },
  orientation,
  path: new Cesium.PathGraphics({ width: 3 }),
  viewFrom: new Cesium.Cartesian3(0, -1000, 1000)
})
viewer.trackedEntity = airplaneEntity
/次