Cesium的3D解决了多个单页应用只增加内存导致的内存溢出问题

1。背景：项目中使用的语言是vue+iview。因为用的是3D，所以找了一家公司买了3D地图产品，但是问题出现了。将我们项目需要的3d地图封装成一个组件叫3dMap.vue，方便各个页面调用。vue的工作机制是离开当前页面时销毁当前页面，但是由于Cesium的特性，不会销毁，每次访问都会新建一个Cesium.constViewer=newCesium.Viewer("newID",{导航:this.navigation,infoBox:this.infoBox});查看电脑进程，会发现chrome浏览器会运行6个以上的进程，其中一个就是Cesium，它占用的内存会随着访问次数的增加而不断增加。2、解决思路：既然每次访问3dMap.vue都会新建一个Cesium，能不能创建一个全局的Cesium，让它一直存在，通过显示和隐藏来控制在各个单页应用中的显示。3.动手操作：3.1首先创建一个全局的Cesium，命名为global3D.vue，这个只是用来初始化3.2挂在main.js中加载importglobal_from'./components/global3D'Vue.prototype.GLOBAL=global_3.3创建一个3DViewer.vue来接收全局的Cesium。在这个文件中，可以写一些设置相机视角，获取经纬度等方法exportdefault{data(){return{//接收全局Viewer，这个Viewer是来自Cesiumnew的viewer：this.GLOBAL.Viewer,场景:this.GLOBAL.Viewer.scene};},}3.4单页应用3.4如果你的3D只是应用在不同的模块中，并且这些模块之间没有公共组件，如图下图中，demo1模块中，demo1Page1和demo1Page2共同使用demo1Menu，只有demo1Page1页面使用了3d组件，demo2也是一样，那么3.3可以完美解决这个问题，但是如果你的3d应该在同一个模块并且有共同的组件，那么在不同页面之间跳转时就会出现问题比如demo1模块中，demo1Page1和demo1Page2一起使用demo1Menu，demo1Page1和demo1Page2都使用3d组件，demo2也是一样，那么从demo1中的页面跳转到demo2中的页面时，3d会丢失demo1demo2demo1Menudemo2Menudemo1Page1demo2Page1demo1Page2demo2Page23.5解决这个问题就是利用了vue的keep-Alive。首先，在App.vue中，进行判断。如果使用了keep-Alive，则转第一个，否则，转第二个然后在router中设置需要缓存的模块{path:'homePage',component:UMPatrolHomePage,name:'UMPatrolHomePage',meta:{keepAlive:true//需要缓存}}最后在单个页面中写下以下内容，to是要转到的页面路径，from是从哪个页面开始的路径，next()必须执行，否则跳转会被阻塞，如果你要跳转或跳转的页面是3D的，这个页面需要缓存，即keep.Alive=true，缓存成功后，再执行destroy操作，这样切换不同页面时，就不会出现3d丢失的情况。对原理感兴趣的同学可以自行搜索。网上有很多文章有详细的解释beforeRouteLeave(to,from,next){if(to.name=="UMPatrolHomePage"||to.name=="UMDetailEquipment"||to.name=="虚检"||to.name=="人员定位明细"||to.name=="管道安全监控列表"||to.name=="管道环境监控列表"||from.name=="人员位置明细"||from.name=="虚检"||from.name=="UMDetailEquipment"||from.name=="UMPatrolHomePage"||from.name=="管理通道安全监控列表"||from.name=="管廊环境监测清单"){from.meta.keepAlive=true;to.meta.keepAlive=true;这个。$销毁（）；下一个（）;}else{from.meta.keepAlive=false;to.meta.keepAlive=false;这个。$销毁（）；下一个（）;}},