【Cesium学习（十二）】Cesium常见问题整理总结

前言

在前面这么多学习的文章中，遇到了好多读者问到的问题，可能来不及为大家全部回复，这里我将这些问题总结统计，一篇文章告诉你们！

常见问题总结 1、怎么使用本地或者服务器的地图底图

在每次初始化地球时imageryProvider可以设置地图。

const googleMap = ' mt0.google /vt/lyrs=s&x={x}&y={y}&z={z}'; // 谷歌 const gaodeMap = ' webst02.is.autonavi /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 mand.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、模型位置在地面以下，可以尝试关闭深度检测

目前就整理总结了这些，后续还看到什么问题，会再进行补充！！！！