cesium自带的组件显示与隐藏

简介: 这篇文章讲解了如何控制Cesium中自带组件的显示与隐藏,包括了各个组件的属性名称及其对应的显示隐藏操作方法。

Cesium有很多自带的工具栏,这些工具栏可以实现隐藏与现实,这里介绍一下具体有哪些工具栏,以及属性名是什么,如何进行隐藏与显示,下面提供源码,源码中会对每个工具栏的介绍,值设置为false为不显示,设置true为显示,默认都是显示的。可以对照着源码的注释试一试。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="credit"></div>
  <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'token';

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器,这里不传ID传DO .
    var viewer = new Cesium.Viewer('cesiumContainer',{
        geocoder:false,//查找位置工具
        homeButton:false,//返回视角的初始位置
        sceneModePicker:false,//选择视角的模式:2D,3D,哥伦布视图
        baseLayerPicker:false,//图层选择选择地图服务还是地形服务
        navigationHelpButton:false,//导航帮助按钮
        animation:false,//动画器件,可以旋转地球
        creditContainer:"credit",//
        timeline:false,//下方的时间轴,默认指示当前时间,允许用户点击跳转到指定时间
        fullscreenButton:false,//全屏显示
        vrButton:true // VR 按钮,右下角有个戴眼镜的按钮,点击可以看下效果
    });

  </script>
 </div>
</body>
</html>

图片1.png

相关文章
|
9月前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
335 1
|
定位技术
百度地图:监听地图缩放自动显示和隐藏的富文本标签
百度地图:监听地图缩放自动显示和隐藏的富文本标签
218 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2870 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
6月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
163 0
|
9月前
|
定位技术 iOS开发
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
62 0
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
201 0
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
338 0
|
前端开发
elementUI隐藏组件
elementUI隐藏组件
126 0
|
容器
uniapp滚动页面改变背景颜色
uniapp滚动页面改变背景颜色
432 0
|
存储 资源调度 JavaScript
2.Vue3中Cesium地图初始化及地图控件配置
本文中,我们主要介绍 Cesium 在 Vue 3运行环境的配置,以及 Cesium 实例中控件的显隐设置,本文是后续文章内容的基础,项目代码在此查看;通过本文,我们可以得到一个纯净的 cesium 项目,后续的操作我们就可以在此基础上进行;
733 0