Cesium中camera有flyTo方法,其用法示例为:
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon,lat,height), // 飞行目的地,视角高度
duration: 3, // 飞行所用时间
// 飞行完成后的事件
complete: function() {
viewer.camera.flyTo({});
},
});
当然,也可以制定视角的方位角、俯仰角等值。complete事件中也可以再嵌套flyTo方法,实现多段飞行。
在Vue组件中使用时,发现complete事件中嵌套的flyTo方法未能执行,经过测试complete事件是执行的。最后猜测是两个flyTo函数发生了冲突,于是改成异步形式,具体如下:
methods: {
// 原始方法
flyToPosition(viewer, p, duration) {
return new Promise(resolve => viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(p.lon, p.let, p.height),
duration: duration,
complete: ()=> {
resolve(true);
}
}));
},
// 异步方法
async flyToPositionAsync(viewer, init_position) {
await this.flyToPosition(viewer, init_position)
return true;
}
},
mounted() {
this.flyToPositionAsync(this.viewer, this.init_position, 3).then((value)=> {
if(value) {
this.flyToPosition(this.viewer, this.new_position, 5);
}
});
}
这样便可实现两个flyTo方法的连续使用。