第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏

从0开始的Cesium

第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境
第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏

---

---

一、Cesium界面预览

1. Geocoder，搜索位置工具。
2. Home Button，返回初始视角。
3. Scene Mode Picker，视角模式切换，有三种：3D、2D、哥伦布视图（CV）。
4. Base Layer Picker，图层选择器。
5. Navigation Help Button，帮助按钮。
6. Animation，动画器件。
7. Credits Display，版权logo。
8. Timeline，时间线。
9. Fullscreen Button，全屏按钮。

二、隐藏页面各个控件

方法一，构造viewer对象时隐藏

  viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,                                //隐藏动画控件
    baseLayerPicker: false,                          //隐藏图层选择                      
    fullscreenButton: false,                         //隐藏全屏
    geocoder: false,                                 //隐藏查找控件
    homeButton: false,                               //隐藏视角返回初始位置按钮
    timeline: false,                                 //隐藏时间线控件
    navigationHelpButton: false,                     //隐藏帮助
    navigationInstructionsInitiallyVisible: false,   //隐藏导航说明
    sceneModePicker: false,                          //隐藏视角模式3D 2D CV
    creditContainer:document.createElement("div"),   //隐藏logo
  }

方法二：通过viewer对象来隐藏div

  viewer.animation._container.style.display = "none";          //隐藏动画控件
  viewer.timeline.container.style.display = "none";            //隐藏时间线控件
  viewer.fullscreenButton.container.style.display = "none";    //隐藏全屏
  viewer.geocoder.container.style.display = "none";            //隐藏查找控件
  viewer.homeButton.container.style.display = "none";          //隐藏视角返回初始位置按钮
  viewer.navigationHelpButton.container.style.display = "none";//隐藏帮助
  viewer.sceneModePicker.container.style.display = "none";     //隐藏视角模式3D 2D CV
  viewer.baseLayerPicker.container.style.display = "none";     //隐藏图层选择
  viewer._cesiumWidget._creditContainer.style.display = "none";//隐藏logo

三、其他设置

const viewer = new Cesium.Viewer('cesiumContainer', {
    scene3DOnly: true,                                  //当 true 时，每个几何实例将仅以 3D 呈现以节省 GPU 内存
    skyBox: false,                                      //天空盒用于渲染星星。当 undefined 时，使用默认的星星。如果设置为 false ，则不会添加天空盒、太阳或月亮
    skyAtmosphere: false,                               //蔚蓝的天空，以及围绕着地球四肢的光芒。设置为 false 将其关闭
    useDefaultRenderLoop: true,                         //如果此小部件应控制渲染循环，则为 true，否则为 false
    requestRenderMode: true,                            //请求渲染模式
    selectionIndicator: true,                           //原生自带绿色选择框，双击显示的绿框
    infoBox: false,                                     //隐藏点击要素之后显示的信息窗口  
    vrButton: false,                                    //隐藏VR按钮，默认false
    shouldAnimate: true,                                //true 时钟应该默认尝试提前模拟时间，则为 true，否则为 false
    sceneMode: 3,                                       //初始场景模式 1：2D 2：2D循环 3：3D，默认3
    mapProjection: new Cesium.WebMercatorProjection(),  //地图投影体系，默认Ellipsoid.WGS84
    shadows:false                                       //确定阴影是否由光源投射,默认false
});

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

---