cesium 我遇到的问题及一些方法

weixin_53607765

已于 2025-05-16 16:54:33 修改

阅读量6.3k

点赞数 26

分类专栏：其它文章标签：开发语言

于 2022-10-25 11:05:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53607765/article/details/127509577

版权

其它专栏收录该内容

4 篇文章

订阅专栏

问题

1. cesium skyAtmosphere.setDynamicAtmosphereColor is not a function

true改false skyAtmosphere: false,

2 the number of coordinates must be a multiple of 3 and at least 3

坐标数必须是3的倍数且至少为3

3 normalized result is not a number 规范化结果不是数字

我的解决办法在vue.config.js 中，cesiumSource 我改用 node_modules/cesium/Build/Cesium

记得在main.js 或者啥 import * as Cesium from 'cesium/Cesium'

import 'cesium/Widgets/widgets.css'

我代码里基本是 new Cesium

所以我是 window.Cesium=Cesium

你也可以全局注册 Vue.prototype.Cesium=Cesium 使用时就 new this.Cesium

参考 Node.js开发——解决Cesium视角切换的异常_aobwm06868的博客-优快云博客

cesium莫名其妙报render normalize错误问题解决_不羁之路的博客-优快云博客_cesium内存不足报错

这是解决啥报错我忘了，反正是因为 n=NaN 然后产生的报错，可能是我上方我自己解决方法要用到的

= e.frustumCommandsList

if(isNaN(n)){

n=0

}

u.length=n

4 custom validator check failed for prop 'length'

length 就是说的这个属性拿到的值类型不兼容。

找报错范围，这是我代码中分页的属性，这里应该是整数，而我之前的值是小数，把计算值的方法更改，求整数就ok了

5. RangeError: Invalid array length at pat (.../Cesium.js)

翻译：无效的数组长度

可能出现的场景：

当创建一个长度为负数或者长度大于等于232 的 Array 或者 ArrayBuffer 时。
当设置 Array.length 属性为负数或者长度大于等于232 时。

参考 Node.js开发——解决Cesium视角切换的异常_aobwm06868的博客-优快云博客

代码过多，在浏览器中启用捕获异常，下图最后一个按钮，

在页面操作报错的前一步时启用

6.Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

阻止在“about:black”中执行脚本，因为文档的框架是沙盒的，并且未设置“允许脚本”权限。

Cesium不识别js，沙箱iframe不允许使用js

解决方案：

第一种：禁用infobox。

const viewer = new Viewer('cesiumContainer', {
infoBox: false, // If set to false, the InfoBox widget will not be created.
});
第二种：设置沙箱的权限。

var iframe = document.getElementsByClassName(‘cesium-infoBox-iframe’)[0];
iframe.setAttribute(‘sandbox’, ‘allow-same-origin allow-scripts allow-popups allow-forms’);
iframe.setAttribute(‘src’, ‘’); //必须设置src为空否则不会生效

参考：https://blog.youkuaiyun.com/ganggun/article/details/124825612

7.Cylinder 底部纹理渲染控制

这要改源码了，

既然是Cylinder，哪就到对应的方法去，在添加entity时

如果用到callbackProperty ，注意Cesium.js 如CylinderGeometry .pack createGeometry

重点是computePositions()方法，

CylinderGeometryLibrary-24ad1484.js或者

cesium.js 里的CylinderGeometryLibrary ={computePositions：function...}

不是call...那就看CylinderGeometry方法中的 _workerName =“调用方法”

我知道要改源码是因为看了 https://www.cnblogs.com/HandyLi/p/11244889.html

8.vue3引入cesium，由于页面cesium地图外层容器transform: scale()后, 导致地图点击位置偏移严重、获取不到pick()数据、地球放大缩小，放大缩小的位置不在当前鼠标的位置的解决方法

参考低代码大屏设计: cesium地图外层容器transform后, 地图点击位置偏移严重

vue3引入cesium，由于页面使用了transform: scale()导致获取不到pick()数据的解决方法_vue3 transform导致饼图显示样式不对-优快云博客

我是npm下载的cesium,在项目node_modules\@cesium\engine\Source\Core路径找到ScreenSpaceEventHandler.js文件，可按照低代码大屏设计: cesium地图外层容器transform后, 地图点击位置偏移严重修改，我是直接在ScreenSpaceEventHandler.js文件修改getPosition方法，项目是vue3+vite+ts ，修改完成后，删除

node_modules\的“.vite”文件夹，在终端重新运行（重新生成.vite文件夹）。此操作是因为页面直接使用的.vite中的cesium.map.js

如果项目页面存在在不同分辨率的屏幕下时, 组件存在拉伸变形的问题. 可继续参考 GoView潜伏的另一隐患: 外层容器transform之后, 不同分辨率下, 内部组件存在拉伸问题https://juejin.cn/post/7423582965215100963