WebGIS开发利用Cesium实现3种场景视图模式

最新推荐文章于 2025-05-13 12:24:12 发布

GIS开发特训营

最新推荐文章于 2025-05-13 12:24:12 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： GIS开发文章标签： javascript 开发语言 3d web gis

本文链接：https://blog.csdn.net/gis_witch/article/details/122448205

GIS开发专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用Cesium库实现三维地图不同模式间的切换，包括三维球面、三维平面及二维地图模式。通过初始化Cesium.WebSceneControl和SceneManager类，利用changeSceneMode方法，可以灵活地在多种显示模式间进行切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文示例主要演示通过场景视图模式提供三种模式：三维球面模式、三维平面模式、二维地图模式，在实际应用中可根据具体应用场景设置。

示例中需要使用【include-cesium-local.js】开发库实现，初始化 Cesium 三维球控件Cesium.WebSceneControl()后初始化视图功能管理类CesiumZondy.Manager.SceneManager()，调用视图功能管理类的changeSceneMode()方法切换地图显示模式。

效果如下图所示：

实现步骤：

1. 引用开发库 本示例引用 local 本地【include-cesium-local.js】开发库, 完成此步后方可正常使用所有三维 WebGL 的功能；

2. 创建三维地图容器并加载三维球控件: 创建 id='GlobeView' 的 div 作为三维视图的容器，并设置其样式，初始化 Cesium 三维球控件 Cesium.WebSceneControl() ，完成此步后可在三维场景中加载三维球控件；

 //构造三维视图类（视图容器div的id，三维视图设置参数）
  var webGlobe = new Cesium.WebSceneControl('GlobeView', {
    terrainExaggeration: 1,
  });

3.模式切换:

模式切换：初始化视图功能管理类CesiumZondy.Manager.SceneManager()，调用视图功能管理类的changeSceneMode()方法切换地图显示模式。

//初始化视图功能管理类
  var sceneManager = new CesiumZondy.Manager.SceneManager({
    viewer: webGlobe.viewer
  });
  let mode = document.getElementById("modeSelect").value;
  //根据选择切换场景视图模式
  if (mode == '3D') {
    //切换场景模式为三维球面
    sceneManager.changeSceneMode('3D', 1);
  } else if (mode === '3DC') {
    //切换场景模式为三维平面
    sceneManager.changeSceneMode('COLUMBUS_VIEW', 1);
  } else if (mode === '2D') {
    //切换场景模式为二维地图
    sceneManager.changeSceneMode('2D', 1);
  }

关键接口

1.【三维场景控件类】Cesium.WebSceneControl(elementId, options)

参数名	类型	说明
elementId	Element \| String	放置视图的 div 的 id
options	Object	（可选）附加属性

options属性主要参数

参数名	类型	默认值	说明
viewerMode	String	‘3D’	（可选）初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图
showInfo	Boolean	false	（可选）是否显示默认的属性信息框
animation	Boolean	true	（可选）默认动画控制不显示
baseLayerPicker	Boolean	true	（可选）是否创建图层控制显示小组件
fullscreenButton	Boolean	true	（可选）是否创建全屏控制按钮
vrButton	Boolean	false	（可选）是否创建 VR 按钮

2. 【视图功能管理类】 CesiumZondy.Manager.SceneManager

【method】 changeSceneMode(sceneMode, duration) 切换场景模式

参数名	类型	说明
sceneMode	String	场景模式’3D’, ‘2D’, ‘COLUMBUS_VIEW’(平面三维)
duration	Number	动画持续时间，<=0 时，保持场景范围不变