cesium场景控制(一)：纯色底图和自定义背景图

1、纯色底图

删除所有底图图层，设置底图颜色

//使用纯色底图--灰色三维球 
viewer.imageryLayers.removeAll(true); //删除所有底图 
viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#7f7f7f");

2、自定义空间背景图

下载需要的背景图片，修改cesium所在容器的样式并调整viewer

#cesiumContainer { 
    background-image: url(../assets/back.jpg);//背景图片地址 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}
/在创建viewer时添加orderIndependentTranslucency和contextOptions设置
viewer = new Cesium.Viewer(cesiumId,{
    //...
    orderIndependentTranslucency:false, //去掉大气层黑圈
    contextOptions: {
        webgl:{
            alpha:true,
        }
    },
})
//关闭天空盒子，设置背景为透明
viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

3、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star