Cesium 默认界面组件显示和隐藏

最新推荐文章于 2025-11-19 15:28:37 发布

转载最新推荐文章于 2025-11-19 15:28:37 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_40626630/article/details/102172377

AboutCesium 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在Cesium JavaScript库中隐藏动画、时间线、地名查找和标识控件，同时提供两种方法：一是通过JavaScript直接操作，二是使用Viewer构造函数的参数进行定制。适合WebGIS开发者优化用户体验。

在这里插入图片描述
方法1 （推荐）

<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.animation.container.style.display ='none';//隐藏动画控件
viewer.timeline.container.style.display ='none';//隐藏时间线控件
viewer.geocoder.container.style.display ='none';//隐藏地名查找控件
viewer.cesiumWidget.creditContainer.style.display ='none';//隐藏ceisum标识
</script>
</body>

方法2 （在viewer的构造函数中设置参数进行控件隐藏，不够灵活）

var viewer = new Cesium.Viewer('cesiumContainer', {
    scene3DOnly: true,
    selectionIndicator: false,
    baseLayerPicker: false
});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

leemraz

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

114.（cesium篇）cesium去掉时间轴并用按钮控制运动

地图之家

08-25

376

114.（cesium篇）cesium去掉时间轴并用按钮控制运动

Cesium实现时间轴去除并使用按钮控制运动GIS

OvzStream的博客

09-21

413

本文将介绍如何通过Cesium实现时间轴的去除，并使用按钮来控制GIS的运动。需要注意的是，以上代码仅提供了基本的实现思路，你可以根据自己的需求进一步定制和优化。现在，当你在浏览器中打开包含以上代码的HTML文件时，你将看到一个没有时间轴的Cesium地球，并且可以通过点击开始按钮和停止按钮来控制地球的运动。方法获取到了开始按钮和停止按钮的DOM元素，并分别为它们添加了点击事件的监听器。接下来，我们可以创建一个按钮用于控制Cesium地球的运动。接下来，我们需要创建一个包含Cesium地球的容器。

1 条评论您还未登录，请先登录后发表或查看评论

Cesium中Viewer界面介绍及组件显隐

DTCloud

04-19

710

任何Cesium应用程序的基础都是Viewer，Viewer是一个带有多种功能的可交互的三位数字地球的容器。在搭建第一个示例后，我们已经通过以下代码初始化了一个视图窗口，看到了一个基本的数字地球。按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。按住鼠标左键拖拽 - 让相机在数字地球平面平移。按住鼠标右键拖拽 - 放缩相机。鼠标滚轮滑动 - 放缩相机。

Cesium 中与影像图层相关的这些核心类和组件

最新发布

double徐

11-19

839

Cesium影像图层核心组件摘要：文章详细介绍了Cesium中影像图层相关的核心类和组件。ImageryLayer类用于创建和管理各类地图服务图层，支持透明度、亮度等视觉参数调整。ImageryLayerCollection提供图层的集合管理功能，包括添加、删除和调整层级等操作。ImageryLayerFeatureInfo实现点击获取要素信息的功能，支持自定义信息展示。BaseLayerPicker和BaseLayerPickerViewModel组件构建了可交互的底图选择器，允许用户切换不同地图服务，并

3.cesium+vue3清除cesium默认组件及logo

m0_49684635的博客

09-12

430

【代码】cesium+VUE3 day3。

cesium中控制primitives显隐

weixin_35750953的博客

12-19

1440

可以使用 Cesium 库中的 setShow 方法来控制 primitives 的显隐。例如，要隐藏一个名为 myPrimitive 的 primitive，可以使用如下代码： myPrimitive.setShow(false); 要再次显示该 primitive，可以使用如下代码： myPrimitive.setShow(true); 注意，如果你想要在没有 Cesium 库的情况下控制...

025：cesium所有面板上默认控件Widgets的显示与隐藏

大剑师兰特的GIS世界

03-18

769

第025个本示例的目的是介绍如何在vue+cesium中分别控制面板上所有默认控件Widgets的显示与隐藏，这里包括动画、时间线、版权、全屏、home窗口等。

cesium 界面小控件

AllBluefm的专栏

03-25

816

3、SceneModePicker：选择模式，2D、3D、Columbus View。5、NavigationHelpButton：导航帮助按钮，显示默认的地图控制帮助。8、Timeline：时间线，指示当前时间，并允许用户跳到指定时间。6、Animation：动画控件，控制视图动画的播放速度。1、Geocoder：搜索，搜索成功之后定位到搜索位置。9、FullscreenButton：全屏。7、CreditDisplay：版权显示。2、HomeButton：视角复位。

cesium+vue3清除cesium默认组件插入比例尺

02-20

为了在 Cesium 和 Vue3 集成的项目中移除默认组件，可以修改 `Viewer` 的配置选项来禁用不需要的功能。具体来说，在实例化 Viewer 对象时传递自定义参数即可实现这一目标。 ```javascript const viewer = new ...

032：cesium修改默认地图源，动态指定地图

大剑师兰特的GIS世界

03-24

1471

第032个本示例的目的是介绍如何在vue+cesium中修改默认地图源，可以动态的指定地图。Cesium加载地图时默认时bing地图，但是由于地域限制，在国内显示不出来，为空白黑乎乎的，只有选择了地图才能将圆球体现出来。另外编号13，显示的是WGS84 Ellipsoid的地形图。

【Cesium学习（三）】Viewer界面基础介绍及组件显影

HAI_GUI的博客

08-07

677

如果控制永久删除可以使用改方法。如果要动态的显示，就要使用css来进行动态的display：none。在Vue3中可以在css通过v-bind来动态设置display的变量（详细设置请看Vue官网介绍。在官网中的部件方法里面，只有删除和查看是否存在部件的方法，并没有动态显示隐藏的方法。这里就是通过js的原生获取demo元素的方法，然后动态修改display。在Vue2中可以通过动态设置class类名来修改。

cesium路径单个显示和隐藏.txt

08-16

cesium路径单个显示和隐藏，通过鼠标单击选中显示路径，隐藏其他不被选中的路径

Cesium笔记 viewer控件隐藏

qq_40216244的博客

01-10

855

【代码】Cesium笔记 viewer控件隐藏。

cesium自带的组件显示与隐藏

Baker的博客

09-02

1129

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

WebGIS——Cesium实现多图层显隐功能（使用Antd Tree 树组件）

weixin_46127993的博客

01-05

1490

Cesium实现多图层显隐功能，有一个很简单的思路，使用Antd Tree组件，所使用的是React框架。

cesium加载本地地图（地图资源放服务器也行），以及设置背景图和只显示部分区域地图，隐藏大气层，去掉光圈等...

m0_55794001的博客

09-09

1702

2.加载地图及相关设置。

Cesium隐藏控件

MZ_的博客

08-25

2133

主要是通过创建Viewer传入的参数决定，版权控件额外使用css控制。 var viewer = new Cesium.Viewer('cesiumContainer',{ geocoder:false, homeButton:false, sceneModePicker:false, baseLayerPicker:false, navigationH...

cesium取消默认图标显示

weixin_43163704的博客

12-31

2030

cesium面板显示去除图标所用方法： <body> <div id='mmCesium' style="height: 100%;"></div> <script type="text/javascript"> var viewer = new Cesium.Viewer('mmCesium',{ geocoder:fals...