Vue + Cesium项目中造成cesium界面卡顿问题的罪魁祸首

已于 2022-09-19 17:16:59 修改
阅读量8.8k 收藏 17
点赞数 4
分类专栏： cesium JS 前端其他 文章标签： 处理文件流 javascript cesium
于 2021-11-24 16:57:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42508580/article/details/121519620
版权
本文揭示了在Vue项目中将Cesium实体直接存入data可能导致的卡顿问题，并分享了优化大量billboard数据的方法，避免地图加载性能瓶颈和浏览器崩溃。

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

Vue + Cesium项目中造成cesium界面卡顿问题的罪魁祸首（优化记录）

千万不要将cesium里的对象如下图entity，保存在vue的data结构树中！！！
千万不要将cesium里的对象如下图entity，保存在vue的data结构树中！！！
千万不要将cesium里的对象如下图entity，保存在vue的data结构树中！！！
一般在cesium注册的事件中处理业务逻辑时会出现这种情况
在这里插入图片描述
这种数据保存在vue中属实很愚蠢！！！
对于页面地图上显示的数据量大导致的界面卡顿可以参考：
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题

vue+cesium cesium数据量太大导致浏览器卡顿解决办法
浮年似水
11-11 4619
vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法 解决方案 ： 不要把任何的cesium对象 放在data中监听,因为在data中的变量 ， vue会劫持数据 ， 导致迟缓。 解决过程 ： 1.将viewer 挂在到window对象下, window.viewer = viewer; 2.项目中用window.viewer来获取viewer对象 3.将任何的czml datasourse 都使用var定义 不要放在data里 ...
【Cesium开发】Vue.js 项目中优化 Cesium.Viewer 性能问题的详细分析
m0_46299825的博客
08-27 1252
在构建基于 Vue.js 和 Cesium.js 的 3D 地图应用时，性能优化是一个非常关键的点。如果处理不当，可能会导致应用出现卡顿、帧率下降的情况。本文将详细探讨在 Vue.js 中使用 ref 来管理 Cesium.Viewer 对象导致的性能问题，并提供有效的优化方案。
Cesium海量数据的管理优化
最新发布
qq_44305130的博客
03-14 458
通过上述方法，可在Cesium中高效管理大规模点数据的显示与隐藏，同时保持应用的流畅性。根据数据特性（动态/静态、规模大小）选择最合适的技术组合。在Cesium中管理大量车辆和人员等点数据的显示与隐藏时，需兼顾灵活性和性能。适用于超大规模静态数据集（如城市级人员分布）。通过UI按钮控制不同组别显示，并实现区域筛选。适合频繁位置更新的实体（如实时车辆）。按类型分组管理实体，便于批量控制。处理静态大规模数据时，使用。属性批量切换可见性。
Vue2解决cesium动画卡顿
XFIRR的博客
02-28 3764
而且我发现，虽然添加实体的方法中的this依旧指向组件实例对象，但是卡顿问题已经完美解决了。在这我陷入了一个误区，我开始尝试将ShowFly方法中添加实体的代码的this变成undefined。于是我将ShowFly的调用改成了一个箭头函数，其实这在vue2中是很不推荐的做法。而我输出了箭头函数的this，发现是undefined。改正之后发现确实添加实体代码的this变成了undefined，但是依旧避免不了卡顿。我这里说的动画卡顿的原因是有过多的entity，导致加载非常缓慢且出现卡帧情况。
解决Cesium数据放到Vue2下data()中造成的页面卡顿问题
前端菜鸡的博客
02-10 1746
在开发vue项目时，会很自然的将变量放到data()中，那么将Cesium的变量放到vue2的data()中，页面就会变得非常的卡，拖动地图时出现掉帧的情况，这是因为vue会对data里面的变量进行数据劫持 那么我们可以将放在data()里面的Cesium变量命名方式进行修改，统一以 "_" 或 "$" 开头，这样页面就不会出现卡顿了，在vue2管网有这么一句话 我们以这总方式命名的变量不会被vue所代理。另外，使用vue3+ts可以完美解决数据冲突问题 ...
Cesium+Vue 数据拦截引起的卡顿
wangwg的专栏
05-15 5131
原因 Cesium + Vue开发中当把Cesium的对象放入到 store、data、computed中，会引起Cesium帧率严重下降的问题。 特别是再加载离子系统时，帧率会降到0，好恐怖。 主要原因是因为Vue的双向绑定机制，放在data里面的Cesium对象被监控拦截。 区分情况 一般情况只加载简单地址可以忽略这问题，基本不会影像使用。 但是当做光照阴影显示、离子效果等这种很炫酷的效果，会发现帧率掉的很严重，甚至卡死。 办法 解决办法也很简单粗暴，就是避免将Cesium的任何对象放入data、s
Cesium加载大量模型（Model）卡顿问题
nuli23的博客
03-13 3172
Cesium
vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法
Angela
10-20 1万+
如题 博主在开发过程中遇到了问题就是 当数据量过大时 浏览器特别卡 情景： 每秒实时渲染数据 效果：当前数据没有渲染完就开始渲染下一秒的数据了 如何将巨大的数据 在一秒内快速渲染到页面上呢？ 解决方案 ： 不要把任何的cesium对象 放在data中监听 ， 因为在data中的变量 ， vue会劫持数据 ， 导致迟缓。 解决方式： 1.将viewer 挂在到window对象下 window.viewer = viewer 以后每次使用都window.viewer来获取viewer对象 2.将任何的
vue3项目中引入Cesium
m0_62317155的博客
09-29 3406
01创建Cesium项目
vite+vue+cesium项目搭建
03-13
【vite+vue+cesium项目搭建】是一个关于使用现代前端构建工具Vite，结合Vue.js框架，并集成3D地球渲染库Cesium的教程。Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它提供了更快的热模块替换（HMR）和更快的...
vue3.x中使用cesium，vue3.x+Cesium
05-04
将Cesium集成到Vue3.x项目中，可以创建交互式的3D地图应用。以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`...
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
洪水淹没分析 vue+cesium完整代码示例
11-13
洪水淹没分析 vue+cesium完整代码示例 包含核心代码及处理多边形区域的最大和最小高程等
基于vue框架开源地理引擎Cesium + echarts + mapbxgl三维可视化项目源码+项目说明.zip
03-09
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业...基于vue框架开源地理引擎Cesium + echarts + mapbxgl + openalyers三维可视化项目源码+项目说明.zip
vue中路由来回切换页面直接卡死
guiplan
07-01 1060
如上图当页面跳转到riskdetails详细页面之后，框架则被这个详情页面的vue替换了，从而导致再次切换到companylist 直接就卡死了。今天发现一个很严重的问题，项目好不容易做好了，结果页面多了，切换之后卡死。页面所有的交互效果都失效了。排查了许久的错误原因最后发现原来是路由名称重复了。
Cesium+Vue过程中遇到的问题
热门推荐
李三丧的博客
06-21 1万+
最近一段时间公司要用到三维地图，又用不起完善的arcgis，只能拥抱开源Cesium。下面就说一说我在Cesium中遇到的那些坑。 cesium+vue依赖包下载不了 网上一大批cesium+vue项目配置的文章，我就不多说了，这里推荐一篇文章： https://www.jianshu.com/p/248a904dbb34 但是！cesium在npm上的包下载不下来啊！坑...
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
weixin_42508580的博客
09-19 1万+
项目之前的设计，billboard 广告牌是绑在 entityCollection 集合下的，为了能够在获取单个实体（entity）时能够获取更多数据信息（entity 能够注入除了它本身的属性之外的属性信息）entityCollection 集合加上集群聚合功能，数据量临界点在 3w~4w 左右，就会出现界面卡顿。fps 低于 20 并且波动很大，延迟保持在 100ms 左右。数据量低于临界点时，entity 的方式呈现页面还是比较奈斯的。
vue cesium 调优
既然青春留不住，还是做个大叔好!
12-09 4534
问题 Vue的数据双向绑定导致Cesium相关的对象一直被监听。 解决办法 因为之前就没有放到vue中，所以并没有出现这个问题。 但实际随着数据的加载会有一些卡顿，具体原因不明，待后续补充 以下为一些博客的内容抽取 参考文章 1. 记一次Vue整合Cesium内存泄露的解决过程 vue项目中整合Cesium在某些页面老是崩溃和卡顿，一般Vue项目内存泄露常发生在某些地方我们引用的第三方库自己创建和维护了DOM，所以Vue在页面卸载时虽然这些对象的引用都释放了，但是因为这些对象自身关联了DOM所以内存无法释
Vue3大组件再页面初次渲染慢的问题
qq_47099087的博客
05-25 845
项目首页中有些组件在第一次加载的时候会很慢，我们可以使用vue3内置的。
Vue+cesium小型项目实例教程：无需Webpack快速上手
Cesium与Vue的集成通常涉及在Vue项目中引入Cesium库。本项目中没有使用Webpack，而是通过main.js直接导入Cesium，这意味着需要在该文件中进行必要的配置以确保Cesium能够被正确加载。此外，可能还需要配置Cesium...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值