Cesium-02:飞机模型基本飞行



在上一篇文章中,对 Cesium 基本初始化有了了解。

在看了官网一些例子后,做了一个飞机根据指定路线飞行的 Demo。

飞机飞行

对于飞机飞行,主要分为以下几个步骤。

1、模型创建

使用的飞机模型是 Cesium 官网上的,可以自行下载。

创建模型基本代码:

      const entity = this.cesiumViewer.entities.add({
        name: 'air',
        // 放置点
        position: '',
        // 模型的朝向等
        orientation: orientation,
        // 绑定模型文件
        model: {
          uri: './model/Cesium_Air.glb',
          minimumPixelSize: 128,
          maximumScale: 20000
        },
        // 路线样式
        path: {
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1,
            color: Cesium.Color.YELLOW.withAlpha(1)
          }),
          width: 3
        }
      })

2、计算路线和时间

Cesium 里面比较好的一个点就是,可以设置时间轴,设置好对应时间的坐标信息,就可以控制飞行了。

所以这里就是计算路线和时间,并把这两信息做一一对应。

下面是写的一个简单的路径计算函数:

    computeFly() {
      // 位置参考和方向等信息的存储
      const property = new Cesium.SampledPositionProperty()

      // 起点:杭州城西
      const startPoint = [119.966746, 30.270928]
      // 终点:钱江新城
      const endPoint = [120.220684, 30.26294]

      this.height = 500
      const length = 100
      const lonAvg = (endPoint[0] - startPoint[0]) / length
      const latAvg = (endPoint[1] - startPoint[1]) / length
      for (let index = 0; index < length; index++) {
        const time = Cesium.JulianDate.addSeconds(this.startTime, 3.6 * index, new Cesium.JulianDate())
        const position = Cesium.Cartesian3.fromDegrees(startPoint[0] + lonAvg * index, startPoint[1] + latAvg * index, this.height)
        property.addSample(time, position)
      }
      return property
    }

3、调整飞行视角

经过上面两部,基本的工作已经完成了。

把对应的路线、方向信息绑定到模型。

此时虽然可以飞了,但是飞机的视角并不是很好。

主要是设置 entity 的 viewFrom 。

这里又两个点:

a)赋值的是迪卡尔4系坐标(这里可以区路线中的第一个位置向量)

b)这个坐标系是相对的,相对于模型的中心点

4、全部代码

下面是全部的代码:



最后的效果如下: