Cesium 初始化视图设置：两种有效方法

2023-12-31 07:24:55

简介

Cesium 是一个强大且流行的开源 JavaScript 库，用于构建引人入胜的 3D 地球可视化效果。为了提供身临其境的体验，设置应用程序的初始视图至关重要。本文将探讨 Cesium 中设置初始化视图的两种有效方法：使用相机属性和使用几何体属性。我们将逐步介绍每种方法，提供示例代码并讨论其优点和缺点。

方法 1：使用相机属性

步骤

创建一个 Viewer 实例。
访问 Viewer 的相机属性。
设置相机的 setView 属性。

代码示例

// 创建 Viewer 实例
const viewer = new Cesium.Viewer("cesiumContainer");

// 访问相机属性
const camera = viewer.camera;

// 设置初始化视图
camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 1000),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: Cesium.Math.toRadians(0),
  },
});

优点

直接控制： 使用相机属性直接控制相机的视角、位置和方向。
灵活： 允许开发者设置自定义的相机参数，以实现特定的视图。
实时更新： 相机属性的变化会立即反映在场景视图中。

缺点

手动设置： 需要手动设置相机的所有属性，这可能很繁琐。

方法 2：使用几何体属性

步骤

创建一个代表初始化视图目标的几何体。
将几何体添加到场景中。
飞行到几何体。

代码示例

// 创建一个圆锥体几何体
const cone = new Cesium.ConeGeometry({
  vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
  radius: 1000,
  height: 2000,
});

// 将圆锥体添加到场景中
const coneEntity = viewer.entities.add({
  name: "Target Cone",
  position: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 0),
  geometry: cone,
});

// 飞行到几何体
viewer.camera.flyTo({
  destination: coneEntity.position,
  duration: 2,
});