React项目-Cesium地图初始化

一、环境描述

        React集成Cesium地图需要注意软件兼容性问题，可以从官网或者百度文章查询React和Cesium地图的版本兼容性，

1、软件版本

        （1）create-react-app创建项目；

        （2）React版本：18.3.1；

        （3）Cesium版本：1.62.0；

        （4）copy-webpack-plugin：5.1.2；

        （5）Node版本：14.21.3

二、创建React项目

1、创建项目

npx create-react-app react-test

2、启动项目

cd react-test
npm run start

3、安装Cesium

npm i cesium@1.62.0 --save

4、安装copy-webpack-plugin

npm i copy-webpack-plugin@5 -D

5、运行npm run eject

        Cesium静态资源需要webpack配置，执行npm run eject可以生成webpack配置，运行前先查看当前git版本是否有提交，如果未提交，需要先本地提交git，否则npm run eject会执行失败。

（1）提交git（如果版本已经提交，无需执行）

git add .
git commit -m "React Init"

（2）执行npm run eject

npm run eject
 
// 执行成功后，生成的文件列表
// config/
//    jest/
//    webpack/
//    env.js
//    getHttpsConfig.js
//    modules.js
//    paths.js
//    webpack.config.js
//    webpackDevServer.config.js
 
// scripts/
//    build.js
//    start.js
//    test.js

三、webpack配置

1、修改webpack.config.js文件

// 1、引入copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
 
// 2、引入Cesium静态资源
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = "src";
 
// 3、在return下的output对象中添加配置
sourcePrefix: '',
 
// 4、在return下的output对象后添加配置（与output对象同级）
amd: {
  toUrlUndefined: true
},
 
// 5、在return下的resolve对象下的alias对象中添加配置
cesium: path.resolve(cesiumSource),
 
// 6、在return下的module对象中添加配置
unknownContextCritical: false,
 
// 7、在return下的plugins数组中添加配置
new CopyWebpackPlugin([{
  from: path.join(cesiumSource, cesiumWorkers),
  to: "Workers"
}]),
new CopyWebpackPlugin([{
  from: path.join(cesiumSource, 'Assets'),
  to: 'Assets'
}]),
new CopyWebpackPlugin([{
  from: path.join(cesiumSource, 'Widgets'),
  to: 'Widgets'
}]),
 
new CopyWebpackPlugin([
  { from: path.join(fileFolder, 'static'), to: 'Static' }
]),
new webpack.DefinePlugin({
  CESIUM_BASE_URL: JSON.stringify('')
}),

四、项目配置

1、路由配置

（1）路由文件配置

        在src/创建一个名为router.js的文件（文件名称和位置可以自己规划）

// 引入组件
import App from "./App";
import CesiumMapFunction from './components/CesiumMapFunction';
import CesiumMapClass from './components/CesiumMapClass';
 
import { createBrowserRouter } from "react-router-dom";
 
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "",
        element: <CesiumMapFunction />
      },
      {
        path: "/cesiumFunction",
        element: <CesiumMapFunction />
      },
      {
        path: "/cesiumClass",
        element: <CesiumMapClass />
      }
    ]
  },
])
 
export default router

（2）index.js文件配置

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import router from './router';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //  // 注意注释React严格模式
    <RouterProvider router={router}>
      <App />
    RouterProvider>
  // 
);
 
reportWebVitals();

（3）App.js文件配置

import './App.css';
import Header from './components/Header';
import { Outlet, useNavigate } from 'react-router-dom';
import { useState } from 'react';
 
function App() {
  const [isActive, setIsActive] = useState(1)
  const navigate = useNavigate()
 
  function clickMenu(path, menuId) {
    if (isActive === menuId) {
      return
    }
    // 保存当前点击的菜单ID
    setIsActive(menuId)
    // 跳转路由
    navigate(path)
  }
 
  return (
    <div className="App">
      <Header clickMenu={clickMenu} active={isActive}>Header>
      <div className="content">
        <Outlet />
      div>
    div>
  );
}
 
export default App;

2、地图组件配置

 （1）Header.js配置

// css文件
import "./css/Header.css"
 
// 数据来源
const menuData = [
  {
    id: 1,
    label: "函数组件Cesium",
    path: "/cesiumFunction"
  },
  {
    id: 2,
    label: "类组件Cesium",
    path: "/cesiumClass"
  }
]
 
// 数据过滤
function FilterData({ clickList, isActive }) {
  return menuData.map(row => {
    return (
      <li className={isActive === row.id ? 'isActive' : ''} onClick={() => { clickList(row.path, row.id) }} key={row.id} >
        {row.label}