Cesium入门之三：隐藏Cesium初始化页面小部件的两种方法

九仞山

发布于 2023-10-14 08:58:20

9380

发布于 2023-10-14 08:58:20

文章被收录于专栏：前端漫步

上一级我们实现了第一个三维地球，但是在这个页面上有很多小部件，我们不想让其显示，应该如何设置呢？这一节我们通过两种方式来隐藏小部件;先看下最终效果

方法1：通过js代码实现

在js代码中，通过在new Cesium.Viewer(container, options)的第二个参数options中配置小部件的显示状态这里的options是一个Viewer.ConstructorOptions类型，它是Viewer构造函数的初始化选项，Cesium为我们提供了很多初始化选项，常用的配置选项如下；更多Viewer.ConstructorOptions类型查看Cesium的官方文档

修改const viewer = new Cesium.Viewer("cesiumContainer")代码如下

const viewer = new Cesium.Viewer("cesiumContainer",{
      animation:false,//动画小部件
      baseLayerPicker:false,//地图图层组件
      fullscreenButton:false,//全屏组件
      geocoder:false,//地理编码搜索组件
      homeButton:false,//首页组件
      infoBox:false,//信息框
      sceneModePicker:false,//场景模式
      selectionIndicator:false,//选取指示器组件
      timeline:false,//时间轴
      navigationHelpButton:false,//帮助按钮
      navigationInstructionsInitiallyVisible:false
})

刷新浏览器，可以看到上面设置false的小部件已经不显示了，效果如下

此时我们发现，下方的CESIUM版权信息依然存在，这个是Cesium的版权信息，我们在配置项中无法使其隐藏，我们借助浏览器的开发者工具，查看到版权信息对应的div的类名是cesium-viewer-bottom

我们可以通过设置cesium-viewer-bottom类的display属性来显示和隐藏版权信息；可以在CSS中设置该属性，也可以在JavaScript代码中设置该属性；关于CSS中设置的方法在下面方法2中介绍，这里我们通过JavaScript代码的方式来实现；首先我们观察下viewer对象，我们通过console.log(viewer)在控制台打印下viewer类，

在viewer对象中，我们可以找到一个_cesiumWidget属性，它是一个CesiumWidget对象，在该对象里面，我们能找到一个creditContainer对象，它对应的就是div.cesium-viewer-bottom,我们可以通过如下代码来隐藏版权信息

  // 隐藏logo信息
  viewer._cesiumWidget._creditContainer.style.display = 'none'

方法2 通过CSS方式实现小部件的隐藏

通过查看页面元素，我们可以找到各个小部件对应的div，我们可以在css中将其display属性设置为none来隐藏小部件，代码如下

<style>
    @import url(./Build/Widgets/widgets.css);
    * {
      margin: 0;
      padding: 0;
    }
    /* 版权信息 */
    .cesium-widget-credits{
      display: none !important;
    }
    /* 小部件 */
    .cesium-viewer-toolbar,/*右上角小部件按钮组*/
    .cesium-viewer-animationContainer,/*左下角动画组件*/
    .cesium-viewer-timelineContainer,/*时间线组件*/
    .cesium-viewer-fullscreenContainer,/*全屏组件*/
    .cesium-viewer-bottom{
      display: none !important;
      visibility: hide !important;
    }
  </style>