部件

Cesium 初始就为我们提供了很多 Widgets（部件），这些部件实现了例如控制视图，选择影像，切换时间等功能，在 Viewer 类中默认配置了，我们也可以在构造 Viewer 对象时通过参数来配置这些部件是否显示。

部件分类

默认部件

默认展示的部件有 9 个：

这些部件的名称及作用如下

geocoder：查找位置工具，查找到之后会将镜头对准找到的地址，默认使用微软的 Bing 地图
homeButton：首页位置，点击之后将视图跳转到默认全球视角
sceneModePicker：选择视角的模式，3D，2D，哥伦布视图(CV)
baseLayerPicker：图层选择器，选择要显示的地图服务和地形服务
navigationHelpButton：导航帮助按钮，显示默认的地图控制帮助
animation：动画组件，控制视图动画的播放速度
creditsDisplay：展示商标版权和数据归属
timeline：时间轴，指示当前时间，并允许用户跳到特定的时间
fullscreenButton：全屏按钮
其他部件

除了上面这些初始化后就显示在界面上的部件外，在上一节的 viewer 属性中我们还看到有几个部件：

infoBox：信息框部件

info

关于信息框的使用我们在 实体 章节中还会进行介绍。

selectionIndicator：选择指示器部件

selectionIndicator

选择指示器是一个绿色的方框，出现在选中实体的位置，表示这个对象被选中，该部件和信息框部件一样，需要有对象被选中时才会出现。

projectionPicker：地图投影选择部件

projectionPicker

该部件默认不显示，需要在构造 viewer 对象时在参数中设置为 true 才会显示

let viewer = new Cesium.Viewer("cesiumContainer", {
  projectionPicker: true,
});

vrButton：vr 控件，该部件默认不显示，需要在构造 viewer 对象时在参数中设置为 true 才会显示

let viewer = new Cesium.Viewer("cesiumContainer", {
  vrButton: true,
});

部件隐藏

隐藏这些部件有以下几种方式

在构造 viewer 的时候设置相关参数

let viewer = new Cesium.Viewer("map3dContainer", {
  animation: false, // 动画组件
  baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
  fullscreenButton: false, //
  geocoder: false, // 地理编码（搜索）组件
  homeButton: false, // 首页，点击之后将视图跳转到默认视角
  infoBox: false, // 信息框
  sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
  selectionIndicator: false, //是否显示选取指示器组件
  timeline: false, // 时间线
  navigationHelpButton: false, // 帮助提示，如何操作数字地球。
  // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
  navigationInstructionsInitiallyVisible: false,
});

通过 css 属性设置

css

.cesium-viewer-toolbar,             /* 右上角按钮组 */
 .cesium-viewer-animationContainer,  /* 左下角动画控件 */
 .cesium-viewer-timelineContainer,   /* 时间线 */
 .cesium-viewer-bottom               /* logo信息 */ {
  display: none !important;
}
.cesium-widget-credits  /* 隐藏logo图片 */ {
  display: none !important;
}
.cesium-viewer-fullscreenContainer  /* 全屏按钮 */ {
  display: none !important;
  position: absolute;
  top: 0;
}

删除 DOM 除了上面两种方式外，还有一种比较暴力的方式，就是直接通过 js 获取到这些部件的 DOM 元素，然后删除即可，比如删除 CreditsDisplay 部件

let viewer = new Cesium.Viewer("cesiumContainer");
document.getElementsByClassName("cesium-viewer-bottom")[0].remove();

部件 ​

部件分类 ​

默认部件 ​

其他部件 ​ ​

部件隐藏 ​

部件

部件分类

默认部件

其他部件

部件隐藏