Cesium界面自定义设置
一、纯净界面
1.css方式
在html页面中
<head>
<style>
body{
/*控制显示范围*/
margin: 0px;
}
#cesiumContainer{
width: 100%;
height: 100%;
}
#cesiumContainer{
background-image: url(../../Apps/SampleData/fire.png);
}
.cesium-viewer-toolbar,/*右上角按钮*/
.cesium-viewer-animationContainer,/*左下角动画控件*/
.cesium-viewer-timelineContainer,/*时间线*/
.cesium-viewer-bottom/*logo信息*/
{
display: none;
}
.cesium-viewer-fullscreenContainer
{/*注:全屏按钮不能通过display:none的方式来达到隐藏的目的,这是因为生成的按钮控件的行内样式设置了display属性,会覆盖引入的css属性*/
position: absolute;
top: -999em;
}
</style>
</head>
2.js方式
var viewer=new Cesium.Viewer('cesiumContainer',{
//放大镜图标,查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图
geocoder: false,
//房子图标,视角返回初始位置
homeButton: false,
//经纬网图标,选择视角的模式,有三种:3D,2D,哥伦布视图(2.5D)
sceneModePicker: false,
//地图图标,图层选择器,选择要显示的地图服务和地形服务
baseLayerPicker: false,
//问号图标,导航帮助按钮,显示默认的地图控制帮助
navigationHelpButton: false,
//动画器件,显示当前时间,允许跳转特定时间
animation: false,
//时间轴
timeline: false,
//全屏图标,全屏按钮
fullscreenButton: false,
//虚拟现实
vrButton: false,
//阴影
shadows: false,
//点击后显示详细信息
infoBox: false,
//展示数据版权属性
CreditsDisplay: false,
});
//去除logo
viewer.cesiumWidget.creditContainer.style.display = "none";
二、自定义设置背景
1.屏蔽天空盒,设置背景为自己的图片
(1).html
<div id="cesiumContainer" style="background-image:url(图片路径)"></div>
(2).js
var viewer=new Cesium.Viewer('cesiumContainer',{
// 设置渲染
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);//设置背景透明
viewer.scene.skyAtmosphere.show=false;//隐藏大气圈
viewer.scene.sun.show=false;//隐藏太阳
viewer.scene.moon.show=false;//隐藏月亮
2.效果图
效果图如下: