cesium解决DeveloperError报错‘Expected longitude to be typeof number, actual type of was string‘

文章目录

1.出现问题
2.解决方法
- 2.1确定报错位置
- 2.2对症修改

Cesium实战系列文章总目录：传送门

1.出现问题

背景：在进行Cesium项目开发时，将Cesium.js版本从压缩版本转换为未压缩版本（便于开发调试）时就会出现DeveloperError报错Expected longitude to be typeof number, actual type of was string
即只是切换Cesium.js版本，未做其他任何更改。

2.解决方法

看报错信息可以发现是check.js在进行类型检查时报错，即要求是数字类型，但实际是字符串。但是为什么压缩版的Cesium.js没有报错？这里猜想可能是没有进行类型检查。

2.1确定报错位置

查看报错信息可知，报错位置是在使用primitive方式加载geojson数据绘制墙体上。

2.2对症修改

（1）报错说类型应该为number，而非string，那就将string转换为number

let positionArray = [];
// 将字符串数组polyonArray转换为数字数组positionArray
for (element of polygonArray) {positionArray.push(Number(element));
}

（2）将字符串转换为数字后，WallGeometry.js又报错options.positions and options.maximumHeights must have the same length

即墙体的高度数组应该和底部坐标数组的长度一致。设置代码如下：

const geometry = new Cesium.WallGeometry({positions: Cesium.Cartesian3.fromDegreesArray(positionArray),// 设置高度maximumHeights: new Array(positionArray.length / 2).fill(50),minimunHeights: new Array(positionArray.length / 2).fill(0),})

（3）修改后即可正确显示。
整体函数代码：

// 使用primitive方式加载geojson
let urlPath = './data/park/parks.geojson';
// 使用jQuery异步加载json数据
$.get(urlPath, function(data) {const features = data.features;addDataToGlobe(features);
})function addDataToGlobe(features) {const instances = [];for (let i = 0; i < features.length; i++) {for (let j = 0; j < features[i].geometry.coordinates.length; j++) {// 将字符串按照","拆分为数组polygonArray = features[i].geometry.coordinates[j].toString().split(',');}let positionArray = [];// 将字符串数组转换为数字数组for (element of polygonArray) {positionArray.push(Number(element));}const geometry = new Cesium.WallGeometry({positions: Cesium.Cartesian3.fromDegreesArray(positionArray),// 设置高度maximumHeights: new Array(positionArray.length / 2).fill(50),minimunHeights: new Array(positionArray.length / 2).fill(0),})instances.push(new Cesium.GeometryInstance({geometry: geometry,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN),},}));}// 合并单个geometry,提高渲染效率const primitive = new Cesium.Primitive({geometryInstances: instances,// PerInstanceColorAppearance：使用每个实例自定义的颜色着色appearance: new Cesium.PerInstanceColorAppearance(),});this.viewer.scene.primitives.add(primitive);
}

修改后正确运行绘制的墙体效果：