cesium编程入门（一）

最新推荐文章于 2025-05-01 08:38:22 发布

lh1234566

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量169

点赞数

文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/lh1234566/article/details/110926149

版权

本文介绍了如何使用JavaScript和CSS来隐藏Cesium地图中的各种控件元素，包括工具栏、动画控件、时间线等，并提供了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面介绍及小空间隐藏

通过js代码控制

var viewer = new Cesium.Viewer('cesiumContainer',{
    geocoder:false,
    homeButton:false,
    sceneModePicker:false,
    baseLayerPicker:false,
    navigationHelpButton:false,
    animation:false,
    creditContainer:"credit",
    timeline:false,
    fullscreenButton:false,
    vrButton:false,

在这里插入图片描述
上图为代码部分对应的控件元素

2.css隐藏控件

 <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }

      /* 不占据空间，无法点击 */
      .cesium-viewer-toolbar,             /* 右上角按钮组 */
      .cesium-viewer-animationContainer,  /* 左下角动画控件 */
      .cesium-viewer-timelineContainer,   /* 时间线 */
      .cesium-viewer-bottom               /* logo信息 */
      {
        display: none;
      }

 - List item

      .cesium-viewer-fullscreenContainer  /* 全屏按钮 */
      { position: absolute; top: -999em;  }

  </style>