03 Cesium—界面介绍和小控件隐藏

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

界面预览

1. Geocoder，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用 bing 地图。
2. Home Button，视角返回初始位置。
3. Scene Mode Picker，选择视角的模式，有三种：3D、2D、哥伦布视图（CV）。
4. Base Layer Picker，图层选择器，选择要显示的地图服务和地形服务。
5. Navigation Help Button，导航帮助按钮，显示默认的地图控制帮助。
6. Animation，动画器件，控制视图动画的播放速度。
7. Credits Display，版权显示，显示数据归属。
8. Timeline，时间线，指示当前时间，并允许用户跳到特定的时间。
9. Fullscreen Button，全屏按钮。

隐藏界面中的各个元素

方法一，通过js代码控制

界面上默认的小控件可以通过在初始化 Viewer 的时候设置相应的属性来关闭，一下列出了界面默认的小控件的关闭方法，还有很多额外的属性，可以查看帮助文档。代码如下：

const viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: false,				//隐藏查找控件
    homeButton: false,				//隐藏视角返回初始位置按钮
    sceneModePicker: false,			//隐藏视角模式3D 2D CV
    baseLayerPicker: false,			//隐藏图层选择
    navigationHelpButton: false,	//隐藏帮助
    animation: false,				//隐藏动画控件
    timeline: false,				//隐藏时间线控件
    fullscreenButton: false,		//隐藏全屏

	......
	......
});

方法二，通过css样式控制

可以通过控制 css 样式起到隐藏效果，代码如下：

.cesium-viewer-toolbar,             /* 右上角按钮组 */
.cesium-viewer-animationContainer,  /* 左下角动画控件 */
.cesium-viewer-timelineContainer,   /* 时间线 */
.cesium-viewer-bottom               /* logo信息 */
{
    display: none;
}
.cesium-viewer-fullscreenContainer  /* 全屏按钮 */
{position: absolute; top: -999em;}

注：全屏按钮不能通过“display: none;”的方式来达到隐藏的目的，因为生成的按钮控件的行业样式设置了“display”属性，会强制覆盖 css 属性，所以还是建议直接通过 js 控制的方式隐藏更合理一些。

如何隐藏版权信息

版权信息需要通过 js 控制隐藏，代码如下：

// 隐藏版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

下载地址是：https://cesium.com/downloads/，不过众所周知，速度很感人。或者你想了解最新的进展可以直接克隆 GitHub 上的代码 Cesium GitHub 地址，不过注意有些特性在分支版本里面才有。

下载后，将 zip 文件解压到您选择的新目录（自定义即可）中，内容应该看起来像下面（版本不同会存在差异）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDOdWSh6-1648020026983)(…/assets/环境搭建01.png)]

注意：直接点击 index.html 是无效的，需要放入WebServer 容器中，才能运行起来。

其它一些设置

除了界面中需要隐藏的控件之外，还一些其它的配置，比如：

const viewer = new Cesium.Viewer('cesiumContainer', {
    
    //启用请求渲染模式
    requestRenderMode: true,
    //原生自带绿色选择框，双击显示的绿框
    selectionIndicator: true,
    //每个几何实例将只能以3D渲染以节省GPU内存
    scene3DOnly: true,

    //隐藏点击要素之后显示的信息窗口                             
    infoBox: false,
    //隐藏VR按钮，默认false
    vrButton: false,
    //开启动画自动播放
    shouldAnimate: true,
    //默认为true，如果不需要控制渲染循环，则设为false
    useDefaultRenderLoop: true,
    //初始场景模式 1：2D 2：2D循环 3：3D，默认3
    sceneMode: 3,
    //地图投影体系，默认Ellipsoid.WGS84
    mapProjection : new Cesium.WebMercatorProjection(),

    /*
    //用于渲染星空的SkyBox对象
    skyBox: new Cesium.SkyBox({    
    	sources : {    
        	positiveX : 'Cesium-1.7.1/Skybox/px.jpg',    
            negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',    
            positiveY : 'Cesium-1.7.1/Skybox/py.jpg',    
            negativeY : 'Cesium-1.7.1/Skybox/my.jpg',    
            positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',    
            negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'    
		}    
	}),
	*/
    /*
    //全屏时渲染的HTML元素
    fullscreenElement: document.body,
    //如果需要控制渲染循环，则设为true
    useDefaultRenderLoop: true,
    //使用默认render loop时的帧率
    targetFrameRate: undefined,
    //如果设为true，将在一个HTML面板中显示错误信息
    showRenderLoopErrors: false,
    //自动追踪最近添加的数据源的时钟设置
    automaticallyTrackDataSourceClocks: true,
    //传递给Scene对象的上下文参数（scene.options）
    contextOptions: undefined,
    //初始场景模式
    sceneMode: Cesium.SceneMode.SCENE3D,
    //地图投影体系
    mapProjection: new Cesium.WebMercatorProjection(),
    dataSources: new Cesium.DataSourceCollection()
    */
});


// 显示帧 FPS
viewer.scene.debugShowFramesPerSecond = true; //开启

// 隐藏大气层
viewer.scene.skyAtmosphere.show = true; //开启

// 光照效果
viewer.scene.globe.enableLighting = true; // 开启光照

//高程遮挡效果 
viewer.scene.globe.depthTestAgainstTerrain = true; // 开启遮挡

// 去除实体双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

当然还有更多的配置或者设置，需要用到的时候再拿出来配置即可。