cesium编程入门(四)界面介绍及小控件隐藏

感性认识

界面介绍,viewer

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

隐藏界面中的元素

在开发自己的项目时,有时候需要对界面做一定的定制,这就需要隐藏一部分界面中的元素,下面我们来看看各个元素的描述

首先创建一个空的工程来测试,源码在https://gitee.com/HQCode/Cesium-test

方法一 通过js代码控制

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

<div id="credit"></div>
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,
    // skyBox : new Cesium.SkyBox({
    //     sources : {
    //     positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
    //     negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
    //     positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
    //     negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
    //     positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
    //     negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
        //     }
        // })
    });

相关代码lesson01-index.html

方法二 通过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属性

<div class="cesium-viewer-fullscreenContainer" style="display: block;">...</div>

相关代码lesson01-index02.html

显示帧速(FPS)

viewer.scene.debugShowFramesPerSecond = true;

Cesium学习交流群:593764057

26 thoughts to “cesium编程入门(四)界面介绍及小控件隐藏”

  1. 现在有个div,我要添加自定义控件的ul放在div中还是与这个div并行排放。不管哪种情况我写的ul样式都没cesium覆盖了,如何让他们显示在同一层呢

  2. 你好。请问,如何在设置view的创始状态,让它显示OPENSTREETMAP作(或其他免费的影像地图服务)为默认基础层,而不隐藏基础层选择控件?

    我的目的是,不想使用BING MAP作为默认基础层,从而不显示页面底部的CESIUM ION的警告信息。

    viewer = new Cesium.Viewer(‘cesiumContainer’, {
    shadows: true,
    geocoder: false,
    baseLayerPicker: true,
    sceneModePicker: true,
    fullscreenButton: true,
    imageryProvider: Cesium.createOpenStreetMapImageryProvider({
    url : ‘https://a.tile.openstreetmap.org/’
    })
    });

    使用上述代码,页面显示后,图层控件显示是黑色的小方块。如何解决,谢谢。

  3. 你好,请问如lesson02中这个建筑,如何能给他指定一个区域然后实现鼠标跟他互动呢?比如点击某一栋楼弹出一个DIV?

  4. Cesium.Viewer的optional里
    creditContainer:”credit”
    在cesium1.75里好像运行无效,刚刚查了一下documentation没有找到对应的参数,想问一下是不是改名字了呢?

  5. // 使用样式,可以去除左下方的logo标志信息
    viewer._cesiumWidget._creditContainer.style.display = “none”;
    // 显示帧数信息
    viewer.scene.debugShowFramesPerSecond = true;

  6. SecurityError: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
    Error: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
    这种报错怎么解决

发表评论

电子邮件地址不会被公开。 必填项已用*标注