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、全部代码
下面是全部的代码:
最后的效果如下: