江苏建设通网站/今日热点
前言
在前面这么多学习的文章中,遇到了好多读者问到的问题,可能来不及为大家全部回复,这里我将这些问题总结统计,一篇文章告诉你们!
常见问题总结
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 monospacescale: 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 monospacescale: 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、模型位置在地面以下,可以尝试关闭深度检测