zouyaoji / vue-cesium

🎉 Vue 3.x components for CesiumJS.
https://zouyaoji.top/vue-cesium
MIT License
1.43k stars 312 forks source link

[Bug Report] vc-graphics-polygon组件使用ref、reactive内的数据 转圈圈导致浏览器崩溃 #484

Closed ooil929 closed 6 months ago

ooil929 commented 7 months ago

VueCesium version

3.2.4

OS/Browsers version

win10&win11 / 谷歌&edge

Vue version

3.4.0-alpha.4

Cesium version

1.111.0

Reproduction Link

codepen

Steps to reproduce

// // 自定义数据 const _that = reactive({ hierarchy4 : {} }); _that.hierarchy4 = { positions: [ {lng:104.43,lat: 25.0}, {lng:104.43,lat: 24.1}, {lng:105.51,lat: 24.1}, {lng:105.51,lat: 25.0} ], holes: [ { positions: [ {lng:104.85,lat: 24.63}, {lng:104.85,lat: 24.58}, {lng:104.93,lat: 24.59}, {lng:104.90,lat: 24.64}, {lng:104.84,lat: 24.65} ] } ] };

What is Expected?

能正常运行

What is actually happening?

卡死内存爆表

zouyaoji commented 7 months ago

重现不了 请弄个在线能复现例子 或者提供能复现的项目

ooil929 commented 7 months ago

重现不了 请弄个在线能复现例子 或者提供能复现的项目

复现例子(只要数据在ref或者reactive内的 都会无法加载):https://codepen.io/ihriaxjd-the-builder/pen/xxMeGaX

zouyaoji commented 7 months ago

排查到是对 hierarchy 参数进行了深度监测

https://github.com/zouyaoji/vue-cesium/blob/dev/packages/utils/cesium-props.ts#L925

makePolygonHierarchy 方法又在内部改了这个变量,导致死循环了。 https://github.com/zouyaoji/vue-cesium/blob/dev/packages/utils/cesium-helpers.ts#L276

这边解决一下 makePolygonHierarchy 中深度拷贝一下 val 避免此问题。

tanghuang-liu commented 6 months ago

fixed in v3.2.5.