【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、模型位置在地面以下，可以尝试关闭深度检测

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