Vue 和 SuperMap iClient3D for WebGL 注意事项

源自 SuperMap by lauxb

前言

最近接触到较多基于 vue 框架+SuperMap_iClient3D_for_WebGL 产品做三维应用开发的项目，反馈较多的是性能卡顿、帧率低。经过排查，发现普遍存在以下问题，现总结出相关问题的解决办法，仅供参考。

问题一

问题描述：误将 Cesium 的对象 viewer 放入到 store、data、computed 中。

如果把 Cesium 的对象 viewer 放入到 store、data、computed 中，会引起 Cesium 帧率严重下降的问题。由于 vue 响应式框架对页面数据渲染是很友好，data 选项会把数据里面所有的属性都转换成 get,set 进行监听。但是对于 Cesium 庞大的对象直接挂载到 vue 的 data 对象上会影响整个页面的渲染效率，降低帧率就，特别是加载大体量模型场景时。

错误示范用例：

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

正确范例图：

问题二

问题描述：Cesium 下的所有对象都不建议放入到 store、data、computed 中。 除了 viewer 对象，Cesium 下的所有对象都不建议放入到 store、data、computed 中，比如 handler 编辑事件。

错误示范用例：

正确做法是将 handler 编辑事件，定义在 data 外部。

正确示范用例：

问题三

分析功能等对象，用完之后要销毁对象。