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

已于 2022-09-19 17:16:59 修改
阅读量7.2k 收藏 13
点赞数 4
分类专栏： cesium JS 前端其他 文章标签： 处理文件流 javascript cesium
于 2021-11-24 16:57:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42508580/article/details/121519620
版权
JS 同时被 3 个专栏收录
39 篇文章 3 订阅
订阅专栏
前端其他
30 篇文章 0 订阅
订阅专栏
cesium
16 篇文章 5 订阅
订阅专栏

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

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

我胖虎不答应！！
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
解决Cesium数据放到Vue2下data()中造成的页面卡顿问题
前端菜鸡的博客
02-10 1583
在开发vue项目时，会很自然的将变量放到data()中，那么将Cesium的变量放到vue2的data()中，页面就会变得非常的卡，拖动地图时出现掉帧的情况，这是因为vue会对data里面的变量进行数据劫持 那么我们可以将放在data()里面的Cesium变量命名方式进行修改，统一以 "_" 或 "$" 开头，这样页面就不会出现卡顿了，在vue2管网有这么一句话 我们以这总方式命名的变量不会被vue所代理。另外，使用vue3+ts可以完美解决数据冲突问题 ...
cesium加载geoserver速度慢使用nginx缓存
最新发布
qq_43523901的博客
05-21 249
cesium加载geoserver速度慢 使用nginx缓存
解决cesium加载海量点崩溃、卡顿
qq_42129143的博客
07-24 2476
解决cesium加载海量点崩溃；解决cesium加载大量点崩溃；
Vue2解决cesium动画卡顿
XFIRR的博客
02-28 2854
而且我发现，虽然添加实体的方法中的this依旧指向组件实例对象，但是卡顿问题已经完美解决了。在这我陷入了一个误区，我开始尝试将ShowFly方法中添加实体的代码的this变成undefined。于是我将ShowFly的调用改成了一个箭头函数，其实这在vue2中是很不推荐的做法。而我输出了箭头函数的this，发现是undefined。改正之后发现确实添加实体代码的this变成了undefined，但是依旧避免不了卡顿。我这里说的动画卡顿的原因是有过多的entity，导致加载非常缓慢且出现卡帧情况。
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
浮年似水
11-11 4184
vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法 解决方案 ： 不要把任何的cesium对象 放在data中监听,因为在data中的变量 ， vue会劫持数据 ， 导致迟缓。 解决过程 ： 1.将viewer 挂在到window对象下, window.viewer = viewer; 2.项目中用window.viewer来获取viewer对象 3.将任何的czml datasourse 都使用var定义 不要放在data里 ...
Cesium+Vue 数据拦截引起的卡顿
wangwg的专栏
05-15 4825
原因 Cesium + Vue开发中当把Cesium的对象放入到 store、data、computed中，会引起Cesium帧率严重下降的问题。 特别是再加载离子系统时，帧率会降到0，好恐怖。 主要原因是因为Vue的双向绑定机制，放在data里面的Cesium对象被监控拦截。 区分情况 一般情况只加载简单地址可以忽略这问题，基本不会影像使用。 但是当做光照阴影显示、离子效果等这种很炫酷的效果，会发现帧率掉的很严重，甚至卡死。 办法 解决办法也很简单粗暴，就是避免将Cesium的任何对象放入data、s
vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法
Angela
10-20 9671
如题 博主在开发过程中遇到了问题就是 当数据量过大时 浏览器特别卡 情景： 每秒实时渲染数据 效果：当前数据没有渲染完就开始渲染下一秒的数据了 如何将巨大的数据 在一秒内快速渲染到页面上呢？ 解决方案 ： 不要把任何的cesium对象 放在data中监听 ， 因为在data中的变量 ， vue会劫持数据 ， 导致迟缓。 解决方式： 1.将viewer 挂在到window对象下 window.viewer = viewer 以后每次使用都window.viewer来获取viewer对象 2.将任何的
cesium 加载 3dtiles 具体参数说明（配最优说明）
weixin_51527962的博客
01-09 7870
url：json切片的地址 show：是否显示 modelMatrix：4x4的转换矩阵，去转换tileset shadows:tileset是否投射或者吸收阴影来着每个光源 默认ShadowMode.ENABLED（接收和投射阴影),Cesium.ShadowMode.RECEIVE_ONLY (只接收阴影），Cesium.ShadowMode.DISABLED（不投射和接收阴影），Cesium.ShadowMode.CAST_ONLY（只接收阴影） maximumScreenSpaceError
vue+cesium加载3dtiles模型内存消耗很大
qq_43474235的博客
09-03 1319
关于通过谷歌浏览器通过Cesium底层添加实景三维都会存在，谷歌浏览器内存回收机制，这个问题官方一直没有解决了。我可以根据一些参数进行调整一下，我这套方案，本人亲测有效，加载模型速度快，而且当你相机视角达到某个高度的时候或者移走的时候，他会自动回收，一点不占内存。
【003】-Cesium中加载大规模数据稳定流畅之性能优化思路
热门推荐
wtuynqy的专栏
02-14 1万+
Cesium 加载大数据的性能优化是一个综合性的过程，需要综合考虑多种因素，采用合适的优化技巧和方法，以达到最佳的性能和用户体验。
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
vite+vue+cesium项目搭建
03-13
【vite+vue+cesium项目搭建】是一个关于使用现代前端构建工具Vite，结合Vue.js框架，并集成3D地球渲染库Cesium的教程。Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它提供了更快的热模块替换（HMR）和更快的...
vue+cesium的小项目
03-18
关于vue+cesium的小例子，不用webpack，而是main.js导入，非常希望可以帮助到你，因为我在这个vue+cesium的引入头疼了半天，官网也没有说明怎么引入vue，所以自己摸索一下，发了出来
vue + Echart + Cesium 绘制剖面分析图源码
03-15
vue + Echart + Cesium 绘制剖面分析图源码
《Cesium性能优化：高效加载大量多边形的技巧与方法》加载大量的polygon导致页面卡顿、卡死
阿啵呲嘚的博客
07-05 3698
使用primitive代替entity的好处
转载 CESIUM数据量太大 导致浏览器卡顿 解决办法
dengam1的博客
04-18 3424
转载：https://www.freesion.com/article/42081397486/ https://blog.csdn.net/li11122212/article/details/93167685
大分辨率(5120*1600)屏幕使用cesium加载高精度倾斜摄影数据浏览器报错崩溃解决方案
qq_40863573的博客
04-01 1万+
大分辨率(5120*1600)屏幕使用cesium加载高精度倾斜摄影数据浏览器报错崩溃解决方案。 An error occurred while rendering.Rendering has stopped。 TypeError：Failed to execute 'shaderSource' on 'WebGLRenderingContext'：parameter 1 is not of type 'WebGLShader'。
Cesium实现动态绘制轨迹线
XFIRR的博客
03-07 1万+
听起来似乎对性能要求更高了，但由于primitive使用更底层的方法进行绘制，就算这样进行绘制，对性能的要求也要远远低于之前使用entity的那种方法。至少我现在可以让我的轨迹线正常绘制，只是在距离比较长后还是有一点点的卡帧，不过也还处在可接受的范围内。这样的一句代码，能够直接改变线的位置和经过的点。刚开始的时候想要使用的是entity的画线方法进行轨迹线的绘制，如果数据量不大，应该是可以实现的。但是我使用这种方法的话，虽然代码层面并不会报错，但是不要说轨迹线的绘制了，整个模型的动画都会卡死。
vue+cesium
08-29
Vue Cesium 是一个基于 Vue.js 和 Cesium.js 的开源库，用于在 Web 应用程序中创建 3D 地图。它提供了一组 Vue 组件，使开发者可以轻松地集成 Cesium 的功能和交互性到 Vue.js 应用程序中。 使用 Vue Cesium，你可以创建具有交互性的 3D 地图，并在地图上添加各种图层、模型、标记等元素。它还提供了一些方便的功能，比如地理坐标转换、地图事件监听等。 在使用 Vue Cesium 时，你需要先安装 Vue.js 和 Cesium.js，并在项目中引入相应的依赖。然后，你可以使用 Vue 组件来构建你的地图应用程序，通过绑定数据和事件来控制地图的行为和显示。 总之，Vue Cesium 是一个强大的工具，让你可以方便地在 Vue.js 应用程序中创建交互性的 3D 地图。如果你对此感兴趣，可以查看官方文档或示例代码以了解更多详细信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值