第04章—探索CesiumWidget：构建交互式3D地球应用的深度实践

引言

在前两章节中，我们一同探索了Cesium与Vue，React框架结合的基础应用，从环境搭建到如何在组件中无缝嵌入Cesium的三维地球视图，为前端项目注入了地理空间可视化的能力。这一过程不仅加深了我们对MVVM框架的理解，也让Cesium的强大多媒体与空间分析功能得以在现代Web应用中大放异彩。

随着基础知识的牢固奠定，我们现在将视线转向Cesium的核心——CesiumWidget。作为Cesium库的精华所在，CesiumWidget不仅是构建地球场景的快捷方式，更是通往高级定制化与深度交互设计的桥梁。在接下来的章节中，我们将深入剖析CesiumWidget，探讨如何通过细致的配置选项，打造出既符合项目需求又兼具视觉震撼的3D地球应用。从简单的场景初始化到复杂的人机互动设计，每一步都将引领你解锁Cesium更深层次的潜能，为你的Web应用增添前所未有的地理空间体验。让我们一起启程，步入CesiumWidget的精彩世界，继续深化在Web前端开发与地理信息可视化领域的探索与实践。

CesiumWidget类是什么

在开始学习cesiumWidget之前，我们需要弄清楚cesiumWidget在cesium中扮演的是什么角色，也就是他是干什么用的？
CesiumWidget 是 Cesium 库中的一个核心类，它负责创建和管理一个包含完整三维地球场景的用户界面组件。这个组件封装了许多底层细节，使得开发者可以快速地在一个网页上搭建起一个交互式的3D地球视图，而无需从头构建所有必要的WebGL和场景管理逻辑。下面是一些关于CesiumWidget的关键点和功能的详细解释：

• 场景管理：CesiumWidget 内部自动创建并管理一个 Cesium.Scene 实例，这个场景包含了所有可见的三维对象（如地球、模型、点、线、多边形等）以及光照、大气、地形等环境要素。
• WebGL 接口：它在指定的DOM元素内（通常是一个 <div>）创建一个 <canvas> 元素，并设置好WebGL上下文，这是渲染3D图形的基础。
• 时间管理：通过集成 Cesium.Clock 类，CesiumWidget 可以控制场景中时间的流逝，这对于动态展示数据尤其重要，比如模拟卫星轨迹或随时间变化的气象数据。
• 用户交互：提供了一套基础的用户交互功能，比如旋转、缩放、平移视图，这些功能通过 Cesium.ScreenSpaceEventHandler 实现。
• 基础配置：允许开发者通过构造函数参数自定义一些基本设置，比如初始视图、底图图层（imageryProvider）、地形提供者（terrainProvider）、是否显示天空盒和大气效果等。

Viewer类是什么？

听完上面cesiumWidget之后，还有一个和cesiumWidget非常相似的类我们不得不提—Viewer类。

在Cesium库中，Viewer 也是一个非常核心的类，它是构建Cesium应用程序的起点，尤其适合需要快速搭建具有基本交互功能的3D地球应用的开发者。Viewer 类实际上是对 CesiumWidget 类的一个扩展，它集成了更多开箱即用的用户界面组件和功能，使开发者能够快速创建一个功能丰富的、可交互的3D数字地球视图。

CesiumWidget vs. Viewer

Cesium.Viewer 类是 CesiumWidget 的一个扩展，它在 CesiumWidget 的基础上增加了一系列额外的UI组件，如时间滑块、图层选择器、导航工具栏等，使得应用开发更加即插即用。如果你只需要一个简单的地球视图而不想要那些额外的UI元素，直接使用 CesiumWidget 更为合适。

CesiumWidget使用示例

本例中使用的项目框架是第一章中搭建的项目框架，其中的基础环境以及搭建项目，就不再叙述

创建一个最基本的 CesiumWidget 实例只需几行代码：

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {

// 获取或创建承载CesiumWidget的div容器
  const container = document.getElementById('cesiumContainer');

// 初始化CesiumWidget
  const cesiumWidget = new Cesium.CesiumWidget(container, {
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    }) // 设置底图服务
  });
});
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

通过以上代码创建的项目，打开localhost:3000可以看到相比通过Viewer创建的cesium项目要少一些UI组件。

CesiumWidget关键API方法和属性

1. 构造函数

   var widget = new Cesium.CesiumWidget(container, options);
   

   • container: 必需，DOM元素或其ID字符串，CesiumWidget将在该容器中创建和渲染地球视图。
   • options: 可选，一个对象，用于自定义CesiumWidget的行为和外观，例如terrainProvider, imageryProvider, shouldAnimate等。

2. scene

   • 属性，返回Cesium.Scene实例，代表3D场景，可用于进一步的场景配置和管理。

3. camera

   • 属性，返回Cesium.Camera实例，用于控制视图，如移动、缩放、旋转等。

4. destroy()

   • 方法，销毁CesiumWidget及其所有依赖资源，释放内存。

5. resize()

   • 方法，重新计算和调整CesiumWidget的大小以适应容器的变化。

使用案例

下面是一个简单的例子，展示了如何使用CesiumWidget在网页上创建一个带有自定义底图和地形的3D地球，并在特定位置添加一个点实体。

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {

// 获取或创建承载CesiumWidget的div容器
  const container = document.getElementById('cesiumContainer');

// 初始化CesiumWidget
  const cesiumWidget = new Cesium.CesiumWidget(container, {
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    }) // 设置底图服务
  });
  // 获取scene属性 scene即三维场景
  const scene = cesiumWidget.scene;
  // 创建一primitives添加到场景中
  const points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
  points.add({
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    color : Cesium.Color.YELLOW,
    pixelSize: 10, // default: 1
    outlineColor: Cesium.Color.YELLOW, // default: BLACK
    outlineWidth: 3, // default: 0
  });
  // 调整视角 将视角看向一个点
  cesiumWidget.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    duration: 3
  })
});
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

此案例中，我们主要讲解了cesiumWidget的scene属性，向scene中添加了一个点几何体，在本章节我们不去研究primitives，后续章节我们会详细讲解，这里可以理解为scene属性中还有个属性是primitives，这个属性是用来存放集合体数据的就足够了。

打开```http://localhost:3000/**我们可以看见地球上面添加了一个黄色的点，如下图所示：

当然cesiumWidget还有更多的api，我们可以查看cesium api文档，这里我们就不一一列举出来了，感兴趣的同学可以自行查阅，了解一下。

总结

在本篇博客中，我们深入探索了CesiumWidget案例，揭示了如何利用这一强大的开源库轻松创建交互式3D地球与地图应用的奥秘。CesiumWidget作为Cesium的核心组件，充当了连接开发者创意与WebGL渲染奇迹的桥梁，它简化了复杂地理空间数据的可视化过程。其主要api如下：

1. 构造函数创建cesiumWidget。
2. cesiumWidget的scene可以添加各种3d数据。
3. cesiumWidget的camera可以调整视角。
4. cesiumWidget的destroy方法可以销毁cesiumWidget实例。
5. cesiumWidget的size方法：在容器大小改变的时候，可以调用此方法，改变三维场景的大小。

希望各位读者能够根据笔者提供的开发步骤顺利地完成本章节cesiumWidget的学习。当然，读者如果有任何问题或者想要和笔者讨论的内容，都可以在评论区留下看法，笔者会根据读者的反馈和问题继续整理和完善本章节内容。