深入探索Cesium Viewer：认识Cesium 3D地理信息系统的核心组件

前端

2023-01-17 18:41:36

用 Cesium Viewer 创建引人入胜的 3D 地理信息系统应用程序

什么是 Cesium Viewer？

Cesium Viewer 是 Cesium 3D 地理信息系统（GIS）框架的核心组件。它为您提供了构建令人惊叹的 3D 地理信息系统应用程序所需的强大功能和灵活性。

入门

了解 Cesium Viewer 的构造函数、成员变量和常用方法对于充分利用其功能至关重要。

构造函数

Viewer 类的构造函数允许您配置各种选项，例如 HTML 容器、是否创建 UI 以及要使用的影像和地形图层提供程序。

var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.BingMapsImageryProvider(),
  terrainProvider: new Cesium.CesiumTerrainProvider({
    url: 'https://assets.agi.com/stk-terrain/world'
  })
});

成员变量

Viewer 类具有丰富的成员变量，提供对场景、相机、图层和时钟对象的访问。

scene： 包含所有场景元素，如相机、光源和几何体。
camera： 控制视点的对象。
imageryLayers： 用于管理影像图层的集合。
terrainProvider： 用于地形图层的高度数据。

常用方法

Viewer 类提供了广泛的常用方法，使您可以控制视点、添加内容并操作场景。

flyTo： 平滑地飞到指定位置。
zoomIn/Out： 放大/缩小视点。
rotate： 旋转视点。
pan： 平移视点。
reset： 重置视点。

// 飞到旧金山
viewer.flyTo(Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 1000));

// 旋转视点
viewer.camera.rotateRight(Cesium.Math.toRadians(90));

示例代码

以下示例演示了如何使用 Cesium Viewer 创建一个基本的 3D 地理信息系统应用程序：

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.imageryLayers.addImageryProvider(Cesium.BingMapsImageryProvider);
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  url: 'https://assets.agi.com/stk-terrain/world'
});

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 1000),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0
  }
});