Cesium 是一个用于构建三维地球与地图应用的开源 JavaScript 库。在开发 WebGIS 应用时,了解 Cesium 的界面与默认控件是非常关键的。本文将详细介绍 Cesium 的界面组成、默认控件的功能和自定义配置方法,帮助你快速上手。
Cesium Viewer 界面概述
Cesium 的核心是 Cesium.Viewer
,它是一个封装好的高层次类,提供了许多常用功能,如加载地图、图层控制、视角控制等。使用 Viewer
类时,Cesium 会自动创建一些默认控件,包含了基础交互功能,如缩放、旋转、全屏切换等。
初始化 Cesium Viewer
初始化一个 Cesium Viewer 实例是创建场景的第一步,代码如下:
const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(), // 加载默认地形imageryProvider: new Cesium.IonImageryProvider({ assetId: 2 }), // 加载默认影像animation: true, // 时间线动画控制timeline: true, // 时间线显示fullscreenButton: true, // 全屏按钮geocoder: true, // 地理编码器(搜索框)
});
Viewer
类提供了大量默认参数,可根据需求进行配置。cesiumContainer
是页面中绑定 Cesium 场景的容器元素,后续所有的场景渲染和交互都会在此容器内完成。
Cesium 界面组成
Cesium Viewer 的界面默认包含以下元素:
- 主场景(Scene):渲染三维地球、地形、影像和矢量数据。
- 时间线(Timeline):展示当前的时间和动画进度。
- 动画控件(Animation Widget):控制时间流逝的播放、暂停、加速等操作。
- 地理编码器(Geocoder Widget):搜索框,用于输入地名进行快速定位。
- 图层选择器(BaseLayerPicker Widget):切换影像图层和地形图层的工具。
- 导航控件(Navigation Help Button):提供关于导航和场景交互的帮助。
- 全屏按钮(Fullscreen Button):切换全屏显示模式的按钮。
默认控件解析
Cesium Viewer 默认提供了几个常见的 UI 控件,下面将详细介绍这些控件的功能和使用方式。
HomeButton(主页按钮)
功能
HomeButton
控件用于将当前的 Cesium 场景视角重置到初始视角,类似于“返回主页”或“重置视角”的功能。在大多数 WebGIS 应用中,这个按钮非常实用,可以帮助用户快速返回默认视图。
使用方法
HomeButton
是 Viewer
默认提供的控件之一,初始化时可以通过配置启用或禁用该按钮。
启用 HomeButton: 默认情况下,HomeButton
是启用的,你可以通过以下代码显式配置启用:
const viewer = new Cesium.Viewer('cesiumContainer', { homeButton: true // 启用主页按钮 });
如果需要禁用,可以将 homeButton
设置为 false
:
const viewer = new Cesium.Viewer('cesiumContainer', { homeButton: false // 禁用主页按钮 });
自定义 HomeButton 位置
HomeButton
可以通过 CSS 自定义其位置。例如,你可以将按钮移动到屏幕的左上角:
.cesium-home-button { top: 10px; left: 10px; }
自定义 HomeButton 行为
默认情况下,点击 HomeButton
会将视角重置为 Cesium 的默认视角。如果你希望自定义这个按钮的行为,可以监听按钮的点击事件并设置自己的视角。
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) { // 阻止默认行为 commandInfo.cancel = true; // 自定义视角重置行为 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 10000), // 定位到北京上空 }); });
这样,点击 HomeButton
时,场景将飞行到指定的经纬度位置而不是默认视角。
SceneModePicker(场景模式选择器)
功能
SceneModePicker
控件允许用户在 Cesium 提供的三种场景模式之间切换:
- 3D 模式(
Cesium.SceneMode.SCENE3D
):默认的三维地球模式。 - 2D 模式(
Cesium.SceneMode.SCENE2D
):平面地图视图,类似于传统的二维地图。 - 哥伦布视图(
Cesium.SceneMode.COLUMBUS_VIEW
):一种结合 2D 和 3D 的模式,地球仍然显示为三维的,但可以自由平移并保持固定视角。
使用方法
SceneModePicker
是 Cesium Viewer 默认启用的控件之一,用户可以通过该控件在三种视图模式之间切换。
启用 SceneModePicker: 默认情况下,SceneModePicker
是启用的,你可以显式配置启用:
const viewer = new Cesium.Viewer('cesiumContainer', { sceneModePicker: true // 启用场景模式选择器 });
如果不需要此功能,可以将其禁用:
const viewer = new Cesium.Viewer('cesiumContainer', { sceneModePicker: false // 禁用场景模式选择器 });
自定义场景模式
在某些情况下,你可能希望程序启动时就指定默认的场景模式。通过在初始化 Viewer
时设置 sceneMode
参数,你可以选择启动的视图模式。
const viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE2D, // 启动时为 2D 模式 });
你还可以通过 API 在运行时动态切换模式:
viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW; // 切换到哥伦布视图模式
自定义 SceneModePicker 行为
默认的 SceneModePicker
提供了三种视角切换功能,如果你希望限制用户只能在特定模式下切换,或者希望自定义行为,可以通过 SceneModePicker
的 viewModel
进行操作。例如,下面的代码限制用户只能在 3D 和 2D 视图之间切换:
viewer.sceneModePicker.viewModel.sceneModes = [ Cesium.SceneMode.SCENE3D, // 仅保留 3D 模式 Cesium.SceneMode.SCENE2D // 仅保留 2D 模式 ];
Geocoder Widget(地理编码器)
功能
地理编码器是一个输入框,允许用户输入地址、地名或经纬度,并将视图自动定位到该位置。该控件基于 Cesium 的 Geocoder
类,实现了对地理位置的快速定位,帮助用户在 Cesium 场景中找到特定位置。
使用方法
在 Cesium 中,默认的地理编码器是通过 Cesium Ion 服务提供的,并且可以在 Cesium Viewer 初始化时启用。以下代码展示了如何在创建 Cesium Viewer 时启用地理编码器:
const viewer = new Cesium.Viewer('cesiumContainer', {geocoder: true // 启用地理编码器
});
自定义
如果想要定制地理编码器的行为,例如使用自定义的地理编码服务,可以通过 Geocoder
类进行配置:
const viewer = new Cesium.Viewer('cesiumContainer', {geocoder: new Cesium.Geocoder({scene: viewer.scene,geocoderServices: new Cesium.IonGeocoderService() // 使用 Cesium Ion 的地理编码服务})
});
你还可以自定义其他地理编码器服务,如 OpenStreetMap 或 Google Maps,具体方式可以参考相应 API 文档进行扩展。
BaseLayerPicker(图层选择器)
功能
图层选择器提供了一个 UI 组件,允许用户在不同的影像图层(如卫星影像、矢量图层)和地形图层之间切换,增强了用户对 Cesium 场景的可控性。
使用方法
图层选择器在 Cesium Viewer 中默认启用,用户可以通过界面选择不同的图层:
const viewer = new Cesium.Viewer('cesiumContainer', {baseLayerPicker: true // 启用图层选择器
});
自定义
如果你想要定制图层选择器中的默认图层,可以通过设置自定义的影像提供者来实现。例如,使用 OpenStreetMap 作为基础影像图层:
const viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: new Cesium.UrlTemplateImageryProvider({url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' // 使用 OpenStreetMap}),baseLayerPicker: true // 启用图层选择器
});
你还可以通过 Cesium.createDefaultImageryProviderViewModels()
来创建多个图层选项。
FullscreenButton(全屏按钮)
功能
全屏按钮允许用户将 Cesium 场景切换为全屏显示,增强沉浸式体验。这对于演示或展示 3D 地图非常有用。
使用方法
在初始化 Cesium Viewer 时启用全屏按钮:
const viewer = new Cesium.Viewer('cesiumContainer', {fullscreenButton: true // 启用全屏按钮
});
自定义
通过 Cesium 的 FullscreenButton
API,可以在代码中手动触发全屏功能,而不仅仅依赖于按钮点击事件:
viewer.fullscreenButton.viewModel.command(); // 触发全屏切换
你还可以监听全屏事件并在进入或退出全屏时执行自定义操作。
Timeline(时间线控件)
功能
时间线控件在 Cesium 中用于展示时间进度,特别适用于动态数据和基于时间的场景,如 CZML 文件中的轨迹数据。用户可以通过拖动时间线来调整场景中的时间。
使用方法
启用时间线控件,显示在 Cesium Viewer 界面底部:
const viewer = new Cesium.Viewer('cesiumContainer', {timeline: true // 启用时间线控件
});
自定义
可以通过 Clock
对象和时间线控件来设置自定义的时间范围和动画:
viewer.clock.shouldAnimate = true; // 启动动画
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // 设置时间段
你还可以通过 viewer.clock.multiplier
来控制时间流逝的速度,或禁用动画。
Animation Widget(动画控件)
功能
动画控件提供了播放、暂停、加速等时间控制功能,方便用户控制 Cesium 场景中的动态元素,例如卫星轨道或天气数据的时间进度。
使用方法
动画控件在动态场景中非常有用,以下代码展示了如何在初始化 Cesium Viewer 时启用它:
const viewer = new Cesium.Viewer('cesiumContainer', {animation: true // 启用动画控件
});
自定义
可以通过 Clock
对象控制动画的播放行为和时间进度:
viewer.clock.multiplier = 2; // 时间流逝速度加倍
你还可以使用 viewer.clock.currentTime
来获取或设置当前的时间,结合动画控件实现复杂的时间控制。
Navigation Help Button(导航帮助按钮)
功能
导航帮助按钮提供了场景的操作指南,帮助用户快速了解 Cesium 中的鼠标和键盘交互方式。这对于初学者非常有用,可以提高用户对三维场景的操作熟悉度。
使用方法
在 Cesium Viewer 中启用导航帮助按钮:
const viewer = new Cesium.Viewer('cesiumContainer', {navigationHelpButton: true // 启用导航帮助按钮
});
自定义
虽然导航帮助按钮是为初学者设计的,但你可以根据用户需求隐藏该按钮,或通过监听导航事件来自定义帮助信息。
总结
Cesium Viewer 提供了丰富的默认控件,涵盖了大多数 WebGIS 应用的基础需求。通过了解和掌握这些默认控件,你可以快速构建功能完备的 Cesium 应用。同时,Cesium 的控件系统非常灵活,你可以轻松地自定义界面,打造符合自己需求的 WebGIS 应用。
在学习过程中,建议多结合实际项目进行操作,灵活运用 Cesium 提供的各种控件和 API,逐步掌握 Cesium 场景的管理和定制技巧。