第03章—Cesium.js与React.js的碰撞：打造三维地球应用入门指南

对React不熟悉或者没兴趣可以跳过本章节，不影响后期内容学习。
后面章节的代码块都是基于VueJs。

在先前一章的探索中，我们深入剖析了Vue与Cesium的融合之道，揭示了如何在Vue的灵活架构下，巧妙集成Cesium的强大多维地球与地图渲染能力，为开发者铺就了一条构建WebGIS应用的捷径。

然而，实现目标的方案往往不止一种。在前端市面上，React作为另一颗璀璨的明星，以其声明式编程模型和强大的生态系统，在现代Web开发领域同样也占据了不可小觑的地位。鉴于此，本专栏也将提供React与Cesium的初始化程序，引领大家踏上一段新的旅程——探索React与Cesium的精妙结合，旨在揭示两者协同工作的独到之处与实践智慧。

在这里，我们通过实战演练，详细解析从环境搭建到成功完成项目的每一步，展现React组件化的魅力如何与Cesium的三维可视化能力结合使用，共同塑造出既美观又功能强大的地理信息系统。不论是对于已经熟悉Vue+Cesium组合的开发者，还是对React生态满怀好奇的新晋探索者，本篇教程都将是一份不可或缺的指南，助力您在React与Cesium的交响曲中，谱写出更加辉煌的篇章。

一、环境搭建与初始化

1. 准备工作
在上一章的学习中，已经讲解过如何安装NodeJs环境和create-vite命令行工具，本章节就不再重复阐述。

安装Node.js: 首先确保你的开发环境中安装了Node.js，推荐使用LTS版本。
全局安装ceate-vite：确保已经全局安装Vite命令工具。

npm install -g create-vite

2. 初始化React项目
搭建好上面的基础环境之后，使用Vite创建一个新的React项目，并指定使用TypeScript模板，以增强代码的类型安全性和可维护性：

create-vite my-cesium-app --template react-ts

推荐大家使用create-vite的方式搭建项目的基础框架，这样可以保证项目结构同本篇文章保持一致。

通过上述方式搭建的项目结构如下图所示：
目录结构

3. 安装Cesium.js

Cesium.js可以通过npm安装，并且考虑到TypeScript的支持，我们也安装对应的类型定义。

cd my-cesium-app
npm install cesium vite-plugin-cesium --save
npm install --save-dev @types/cesium

4. 配置Vite
打开项目中的vite.config.ts文件，进行Cesium的配置。这一步是为了让Vite正确处理Cesium庞大的静态资源，避免在开发模式下遇到性能瓶颈：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react()
  ],
  build: {
    rollupOptions: {
      // 处理Cesium的大文件
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/cesium/')) {
            return 'cesium';
          }
        },
      },
    },
  },
});

二、Cesium.js与React的初次握手

完成上面的基础环境搭建之后，接下来我们开始正式的cesium编程。

1. 创建CesiumViewer组件

现在，你可以在React组件中引入并使用Cesium了。以创建一个基本的Cesium Viewer为例，在src/App.tsx中添加如下代码：

import React from 'react';
import * as Cesium from 'cesium';
import './index.css';

function App() {
  useEffect(() => {
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    
    return () => {
      // 清理工作，销毁Viewer实例
      viewer?.destroy();
    };
  }, []);

  return (
    <div>
      <div id="cesiumContainer" style={{ width: '100%', height: '100vh' }}></div>
    </div>
  );
}

export default App;

2. 引入cesium样式
在src/main.tsx中引入cesium的样式

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import "cesium/Build/Cesium/Widgets/widgets.css";

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

3. 添加访问地图数据的token
这个token是在cesium ion中申请的，用于访问一些线上的地理数据，地形数据等。申请token的教程在前面已经讲解过了，本章节就不再重复讲解了，直接在src/main.tsx文件代码中添加以下代码。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import "cesium/Build/Cesium/Widgets/widgets.css";
import { Ion } from 'cesium';

window.CESIUM_BASE_URL = '/';
Ion.defaultAccessToken = '你申请的token';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

4. 添加cesium的静态资源到public目录下
将node_modules目录下面的这几个文件夹拷贝到项目的public目录下：

node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets
如图所示：

三、开发与调试

一切准备就绪之后，启动Vite开发服务器，见证第一个React整合Cesium的应用，打开控制台，输入

npm run dev

随后打开浏览器输入http://localhost:5173，接下来你应该能够看到一个带有地球的视图，这标志着Cesium已经成功集成到你的React应用中。

四、总结

通过将Cesium与Vue、React等现代前端框架相结合的探讨，我们不仅领略了Cesium在三维地理信息可视化领域的强大能力，还深刻理解了如何将其无缝融入主流的前端开发流程中，为Web应用增添无与伦比的空间信息展示效果。无论是利用Vue的组件化思维优化地图应用的结构，还是借助React的高效更新机制提升用户体验，Cesium都展现了其作为高性能 WebGL 库的灵活性与适应性。

接下来的旅程，我们将深入Cesium的更广阔天地。从高级功能如地形分析、3D模型加载与交互，到深入地球引擎内部，探索shader编程以定制独特视觉效果。我们还将探讨性能优化策略，确保即使在大规模数据集下也能保持流畅的用户体验。后面章节的学习不仅是对Cesium技术深度的一次挖掘，更是开启地理空间信息领域无限可能的钥匙。让我们携手，继续深化对Cesium的理解与应用。