【Cesium学习（十二）】Cesium常见问题整理总结
前言
在前面这么多学习的文章中，遇到了好多读者问到的问题，可能来不及为大家全部回复，这里我将这些问题总结统计，一篇文章告诉你们！
常见问题总结
1、怎么使用本地或者服务器的地图底图
在每次初始化地球时imageryProvider可以设置地图。
const googleMap = 'https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'; // 谷歌
const gaodeMap = 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' // 高德
let viewer = new Cesium.Viewer('cesiumContainer', {
//1.Cesium本地服务
imageryProvider: Cesium.createTileMapServiceImageryProvider({
url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}),
//2.高德地图 / 谷歌地图
imageryProvider: new Cesium.UrlTemplateImageryProvider({
// url:gaodeMap ,
url:gaodeMap
}),
//本地图片
imageryProvider: new Cesium.SingleTileImageryProvider({
url : '../../images/luwang.jpg'
})
});
2、怎么关闭大气层显示
scene.skyAtmosphere.show = false;
3、怎么显示帧速（FPS）
viewer.scene.debugShowFramesPerSecond = true;
4、怎么在Cesium中开启雨雪天气
var viewer = new Cesium.Viewer('cesiumContainer');
// 创建一个雨雪天气效果
var rainSnow = Cesium.PostProcessStageLibrary.createRainSnowStage({
snowEnabled: true, // 开启雪效果
snowSize: 0.1, // 雪片大小
snowSpeed: 1.0, // 雪片速度
snowIntensity: 1.0, // 雪片强度
rainEnabled: true, // 开启雨效果
rainSize: 0.1, // 雨滴大小
rainSpeed: 1.0, // 雨滴速度
rainIntensity: 1.0 // 雨滴强度
});
// 将雨雪天气效果添加到 Viewer
viewer.scene.postProcessStages.add(rainSnow);
5、怎么重写右上角小房子home按钮事件
var viewer = new Cesium.Viewer('cesiumContainer');
// 重写 homeButton 事件
viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
// 阻止事件继续传递
e.cancel = true;
// 后面写点击后的代码逻辑，如飞行到某个位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(119.966746, 30.270528, this.height),
orientation: {
// 航向
heading: Cesium.Math.toRadians(0),
// 俯仰
pitch: Cesium.Math.toRadians(60),
// 滚转
roll: 0.0,
}
});
});
6、调整地球阴影明暗
viewer.shadowMap.darkness=0.5;
7、创建地图上的entity时，同时设置了billboard和label，导致部分视角只显示billboard广告牌，而没有出现label标签文字。
方案一：（相对有效）
为label的配置，设置显示背景，并且设置一个背景颜色。
此处由于billboard的image为一个黑色边框的纯白色图标，因此label的backgroundColor设置为了纯白色。可以依据情况，设置一个透明颜色的背景。
billboard: {
image: img,
width: 19,
height: 19
},
label: { //文字标签
text: imgName,
font: '500 30px Helvetica',// 15pt monospace
scale: 0.45,
style: Cesium.LabelStyle.FILL,
fillColor: Cesium.Color.BLACK,
pixelOffset: new Cesium.Cartesian2(1, -0), //偏移量
showBackground: true, //显示label的背景
backgroundColor: Cesium.Color.WHITE //设置label的背景颜色
},
方案二：更改广告牌billboard的颜色，使其具有一个透明度，让文字可以看到
billboard: {
image: img,
width: 19,
height: 19,
color: new Cesium.Color(1.0,1.0,1.0,0.8)
},
label: { //文字标签
text: imgName,
font: '500 30px Helvetica',// 15pt monospace
scale: 0.45,
style: Cesium.LabelStyle.FILL,
fillColor: Cesium.Color.BLACK,
pixelOffset: new Cesium.Cartesian2(1, -0), //偏移量
},
8、3Dtile 遮挡label
解决方案就是关闭地图的深度检测，在初始化地球时加上
disableDepthTestDistance: Number.POSITIVE_INFINITY // 关闭深度检测
9、加载矢量数据或模型时，会在地面上漂移抖动
因为模型或数据的高度在地面以下造成的(可类比水面折射看水底物体现象)
解决办法：
1、开启深度检测viewer.scene.globe.depthTestAgainstTerrain =true;
2、如果看不到模型，说明高度确实有问题，调整模型高度
10、加载外部资源的跨域问题
浏览器提示CORS policy错误，所加载的底图、地形、模型等外部数据没有显示。
解决方法：
因为浏览器和WebGL的安全性要求，cesium加载的所有外部资源都需要服务端允许跨域访问，跨域问题的终极解决方法在服务端：1、若服务端可控:添加跨域头2、若服务端不可控:添加代理服务。
11、加载的矢量数据或倾斜模型位置不正确
使用国内公开访问的底图服务时(如高德百度、国内谷歌等)都是国测局偏移坐标系，如果数据是标准无偏的，叠加后肯定会有偏移。
解决办法：坐标系问题，使用与数据相同坐标系的底图，或者对矢量数据做加偏处理。
12、加载的gltf模型不出现
按示例代码加载gltf模型后在地球上看不到
解决办法：
1、把URL地址拷贝出来在浏览器栏里访试下,保证network成功请求了模型
2、模型比例大小问题，修改模型缩放scale参数或缩放下视角进行浏览
3、模型位置在地面以下，可以尝试关闭深度检测