原因
Ceisum+Vue开发中直接把Cesium对象放入到store、data、computed中,导致vue对viewer进行了数据劫持,会引起Cesium帧率严重下降,特别是加载离子系统时
数据劫持的情况表现在viewer 或者viewer.scene 为 observer对象
区分情况
一般情况只加载简单地址可以忽略这问题,基本不会影像使用。
但是当做光照阴影显示、离子效果等这种很炫酷的效果,会发现帧率掉的很严重,甚至卡死。
解决方案:
1、将viewer放到全局对象当中;
let viewer = new Cesium.Viewer('container');
window.earth = viewer
2、构建一个中间层,通过中间层访问,阻断数据劫持到最底层;(简单说就是vue触发数据变更,然后通知中间件变更的属性,由中间件将变更的属性值通知cesium中相应的属性);
请问你vue项目打包后,因为引入了cesium的第三方库,vendor.js 是不是会特别大,怎么优化啊
cesium引入的方式不推荐通过node_moudules的方式,通过将cesium放入static,然后在index.html通过srcipt标签引入