Vue+SuperMap iClient3D for Cesium开发注意事项

---

概述

在基于vue框架+SuperMap iClient3D for Cesium产品做三维应用开发的项目中， 比较常见的问题是性能卡顿、帧率低。经过排查，发现普遍是由以下问题引起的，现总结出引起相关问题的原因及解决办法，以供参考：

常见问题及解决方案

1、如果把Cesium的对象viewer放入到 store、data、computed中，会引起Cesium帧率严重下降的问题。

vue响应式框架对页面数据的渲染非常友好，会把data内所有对象的属性都转换成get,set进行监听。 但是将Cesium直接挂载到vue的data对象上时（如图1所示），Cesium中数量庞大的对象会影响整个页面的渲染效率，降低帧率， 特别是加载大体量模型场景时，影响更加明显。

正确做法:将viewer对象作为window的全局对象，避免vue劫持viewer，同时方便在其他组件中调用。如图2所示：

2、不仅viewer对象，Cesium下的所有对象都不建议放入到 store、data、computed中，比如handler编辑事件。如图3所示：

正确做法是将handler编辑事件，定义在data外部。如图4所示：

3、分析功能等的对象，用完之后要及时销毁，防止出现功能在界面上关闭但对象还驻留在内存中的情况。如图5所示：