Vue+Cesium中flyTo函数complete事件失效

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方法的连续使用。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值