cesium笔记2_viewer.zoomto cesium

作者：CSDN @ _乐多_

---

---

一、packages/engine和packages/widgets区别

在 Cesium 中，packages/engine 和 packages/widgets 是两个不同的模块，它们提供了不同的功能和用途。

1. packages/engine：

• 该模块包含了 Cesium 的核心引擎部分，用于构建和渲染 3D 场景。
• 这个模块提供了 Cesium 的主要功能，包括地球和其他天体的渲染、相机控制、几何体创建、地形渲染、光照效果、场景渲染优化等。
• 通常，当你需要在你的应用程序中创建一个 3D 场景，并对场景的细节进行更多的控制时，你会使用 packages/engine 模块。

2. packages/widgets：

• 该模块包含了 Cesium 的用户界面小部件（widgets），用于在场景中添加交互式的用户界面元素。
• 这个模块提供了一系列方便的小部件，如工具栏、地图导航控件（zoom、compass、home button 等）、信息框、时间轴、图例等，用于增强用户体验和场景的交互性。
• 使用这些小部件，你可以快速地为场景添加常见的交互功能，而无需手动编写复杂的用户界面代码。
• 如果你想在你的场景中添加一些交互式的用户界面元素，你可以使用 packages/widgets 模块。

综上所述，packages/engine 是用于构建和渲染 3D 场景的核心引擎模块，而 packages/widgets 是用于添加交互式用户界面小部件的模块。在使用 Cesium 进行开发时，你通常会同时使用这两个模块，以获得完整的 3D 场景展示和用户交互的功能。

二、packages/engine

三、packages/widgets

3.1 Cesium.Viewer是什么

Cesium.Viewer 是 Cesium API 中的一个构造函数，用于创建一个 Cesium 场景的可视化窗口。它提供了一个交互式的地球场景，可以在其中显示各种地球数据、实体、模型、图层等，并且支持用户与场景进行交互操作。

Cesium.Viewer 的构造函数定义如下：

new Cesium.Viewer(container, options);
1

参数说明：

• container: 必需参数。表示容纳 Cesium 场景的 HTML 元素，可以是 div、canvas 等元素的 ID 或 DOM 对象。
• options: 可选参数。一个包含各种选项的对象，用于自定义 Cesium 场景的行为和外观。这个参数是一个包含键值对的对象，可以设置各种属性来配置 Cesium 场景。

常见的 options 参数属性如下：

• animation: 控制是否显示动画小部件。默认值为 true。
• baseLayerPicker: 控制是否显示基础图层选择器小部件。默认值为 true。
• fullscreenButton: 控制是否显示全屏按钮小部件。默认值为 true。
• vrButton: 控制是否显示虚拟现实按钮小部件。默认值为 false。
• homeButton: 控制是否显示返回初始视图按钮小部件。默认值为 true。
• infoBox: 控制是否显示信息框小部件。默认值为 true。
• sceneMode: 控制场景的初始模式，可以是 Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D 或 Cesium.SceneMode.COLUMBUS_VIEW。
• terrainProvider: 控制地形提供者，用于加载和显示地球表面的地形数据。
• imageryProvider: 控制图像提供者，用于加载和显示地球表面的图像数据。
• skyBox: 控制场景中的天空盒，用于显示天空的背景。
• clock: 一个 Cesium.Clock 对象，用于控制场景中的时间和动画。

这里列出的只是一部分常用的选项，实际上 Cesium.Viewer 支持的选项非常丰富，可以根据需要进行更多的配置和定制。

示例用法：

const viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  homeButton: false,
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: "https://.../{z}/{x}/{y}.jpg",
  }),
});
1
2
3
4
5
6
7
8
9

上述示例中，创建了一个名为 viewer 的 Cesium 场景实例，场景将显示在 ID 为 “cesiumContainer” 的 HTML 元素中。还设置了一些选项来自定义场景的行为，如禁用动画、禁用基础图层选择器和全屏按钮，并使用一个图像提供者来加载地球表面的图像数据。

3.2 viewer.zoomTo(viewer.entities)

viewer.zoomTo(viewer.entities) 是 Cesium API 中的一个方法调用，它的作用是将场景中的所有实体（entities）调整到合适的视角，从而完整地显示所有的实体。

在 Cesium 中，实体（entities）是用于在场景中表示各种物体或元素的对象，可以是点、线、面、模型等。viewer.entities 是一个 Cesium.Viewer 实例的属性，表示场景中的所有实体对象的集合。

当调用 viewer.zoomTo(viewer.entities) 方法时，Cesium 会自动计算所有实体的边界范围，然后调整视角，以确保所有实体都在当前视口内可见，并且尽可能填充整个视口。这样，你就可以看到场景中的所有实体，而无需手动调整视角或缩放。

这个方法特别适用于当场景中有多个实体，且它们的位置分布较广，你希望一次性将它们全部显示出来时。它可以节省你手动调整视角的时间，使场景中的所有内容都一目了然。

3.3 Cesium.Cartesian3.fromDegrees(113.802689907, 35.373933211, 0.00000))

Cesium.Cartesian3.fromDegrees 是 Cesium API 中的一个方法，用于将经度（longitude）、纬度（latitude）和高度（height）的坐标值转换为 Cesium 中的 Cartesian3 坐标。

在 Cesium 中，Cartesian3 是表示三维空间中点的对象，它由三个浮点数值（x、y、z）表示。经度和纬度通常用于表示地球上的位置，而高度用于表示相对于地球表面的高度。

这个方法的语法是：

Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
1

其中：

• longitude 表示经度值，用于指定点在地球上的经度位置，单位为度。
• latitude 表示纬度值，用于指定点在地球上的纬度位置，单位为度。
• height 表示高度值，用于指定点相对于地球表面的高度，单位为米。

使用该方法可以将经度、纬度和高度的坐标值转换为 Cesium 的 Cartesian3 坐标，以便在 Cesium 场景中定位和显示相应的点。在你提供的例子中，代码将经度 113.802689907、纬度 35.373933211 和高度 0.00000 转换为 Cesium 的 Cartesian3 坐标。

声明：
本人作为一名作者，非常重视自己的作品和知识产权。在此声明，本人的所有原创文章均受版权法保护，未经本人授权，任何人不得擅自公开发布。
本人的文章已经在一些知名平台进行了付费发布，希望各位读者能够尊重知识产权，不要进行侵权行为。任何未经本人授权而将付费文章免费或者付费（包含商用）发布在互联网上的行为，都将视为侵犯本人的版权，本人保留追究法律责任的权利。
谢谢各位读者对本人文章的关注和支持！