vue+cesium加载3dtiles模型内存消耗很大

最新推荐文章于 2025-03-03 14:02:18 发布

just___go

最新推荐文章于 2025-03-03 14:02:18 发布

阅读量1.6w

点赞数 6

分类专栏： vue cesium

本文链接：https://blog.youkuaiyun.com/just___go/article/details/96482151

版权

在使用Vue框架加载大型倾斜摄影测量的3DTiles模型时，出现卡顿且JavaScript内存占用高。通过分析，怀疑是Vue对data中的viewer创建Watcher导致的内存不断更新。将viewer移出data，解决了内存急剧增加的问题，实现了内存优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面临的问题

要加载一个倾斜摄影测量的三维模型，因为模型文件很大，所以选择了cesium的3dtiles格式（可分片加载）。
在没有使用框架，用原生JavaScript的情况下，页面交互良好，没有卡顿。正式开发的时候，选择了用vue框架。在看了vue cli3.0+cesium构建后，成功搭建好了项目。但是在加载倾斜摄影测量模型的时候，遇到了问题：在多次移动视角之后，相比原生项目，模型的展示明显卡顿，查看使用内存，发现JavaScript占用内存不断增加，甚至达到了400M。

解决方法

在想了很久，并且在网上寻找类似问题，没有找到解决方法。后结合之前看过的一些vue源码的皮毛发现了问题。

 data () {
   
        return{
   
            viewer:Object,
        }
    },
    mounted () {
   
        this.viewer = new Cesium.Viewer('cesiumContainer',{
   
            animation:false,       //是否显示动画控件
            homeButton:true,       //是否显示home键
            geocoder:false,         //是否显示地名查找控件        如果设置为true，则无法查询
            baseLayerPicker:false, //是否显示图层选择控件
            timeline:false

最低0.47元/天解锁文章