Cesium中Viewer界面介绍及组件显隐
Cesium中Viewer界面介绍及组件显隐
任何Cesium应用程序的基础都是Viewer,Viewer是一个带有多种功能的可交互的三位数字地球的容器。在搭建第一个示例后,我们已经通过以下代码初始化了一个视图窗口,看到了一个基本的数字地球。
let viewer = new Cesium.Viewer("cesiumContainer");
默认地,场景支持鼠标交互,并且支持以下相机漫游方式:
-
按住鼠标左键拖拽 - 让相机在数字地球平面平移
-
按住鼠标右键拖拽 - 放缩相机
-
鼠标滚轮滑动 - 放缩相机
-
按住鼠标中键拖拽 - 在当前地球的屏幕中间点,旋转相机
初始化界面也默认自带了一些组件,每一个组件的描述如下:
geocoder
:查找位置工具,查找到之后会将镜头对准找到的地址(但实际效果体验较差),默认使用微软的Bing地图homeButton
:首页位置,点击之后将视图跳转到默认视角dceneModePicker
:选择视角的模式,3D,2D,哥伦布视图(CV)baseLayerPicker
:图层选择器,选择要显示的地图服务和地形服务navigationHelpButton
:导航帮助按钮,显示默认的地图控制帮助animation
:动画器件,控制视图动画的播放速度creditsDisplay
:展示商标版权和数据归属timeline
:时间轴,指示当前时间,并允许用户跳到特定的时间fullscreenButton
:全屏按钮
可以通过调整Viewer中的属性来控制组件的显隐:
let viewer = new Cesium.Viewer("container", {
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
vrButton: false, // 隐藏VR按钮,默认false
geocoder: true, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
infoBox: true, // 隐藏点击要素之后显示的信息窗口
sceneModePicker: false, // 隐藏场景模式选择控件
selectionIndicator: false, // 显示实体对象选择框,默认true
timeline: false, // 隐藏时间线控件
navigationHelpButton: false, // 隐藏帮助按钮
// terrainProvider:new Cesium.createWorldTerrain(), //地形开启
});
viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!