【WebGIS】Cesium：界面与默认控件
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 场景的管理和定制技巧。
原文地址：https://blog.csdn.net/2303_80346267/article/details/142867954
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！