SuperMap iClient3D for WebGL-Vue组件开发之全局globe属性

作者：桔子
本文同步发布于https://www.jianshu.com/p/5a46b8538182

前一节提到了Vue.$globe自定义属性，这一节着重来介绍设计这个自定义属性的初衷和用法。

Vue的MVVM架构的一个核心功能就是数据的绑定，将部分数据在data属性中进行监听，大多数开发者在使用SuperMap iClient3D for WebGL和Vue进行结合开发时，会情不自禁的将viewer、scene等和场景相关的对象放在data中监听，方便参数的传递和使用。由于data的监听机制，以及viewer、scene等的刷新机制，直接导致场景帧率低下，场景浏览卡顿，也就说不能讲viewer、scene等放置到data中进行监听，那vue组件之间需要传递viewer、scene等参数时如何实现？这就引申出Vue.$globe属性设计的构想。

通过全局设置改属性，可以在任意vue组件中获取到该属性，也就方便了后续的调用。

//资源路径
//后续会添加全局的Viewer属性
//静态资源，需放置到static目录
const CesiumPath = "./static/Cesium";///Cesium.js
// const csspath = "./static/Cesium/Widgets/widgets.css";
const prettycsspath="./static/Cesium/pretty.css"

export default{
    CesiumPath,
    prettycsspath
}

 this.$set(this.$globe, "viewer", viewer);
 this.$set(this.$globe, "scene", viewer.scene);

由于前面提到Cesium资源的加载是异步的，viewer的初始化也是需要时间的，在其他组件初始化时并不能在初始化时就获取到viewer、scene等参数，在后续的组件开发过程中将讲解如何实现。