参考链接: https://blog.csdn.net/qq_33484881/article/details/85336458.

Cesium配置修改

新建react项目之后，现在开始将cesium库加入到react中：

1、安装第三方库：命令提示行中输入 npm install cesium安装cesium，再安装copy-webpack-plugin；

npm install cesium
npm install copy-webpack-plugin

2、修改配置文件：由于create-react-app是基于webpack的项目，在生成时会自动隐藏webpack配置项，所以需要将webpack配置文件暴露出来，这里一般的做法是在命令提示行输入：npm run eject，而由于npm run eject过程基本不可逆，所以若出现错误会很麻烦，所以建议直接先行修改git配置再执行eject：首先输入git add . ，然后git commit –m “init”，再执行npm run eject，出现图5提示时，输入y，显示图6结果，即为成功，此时目录结构改变（图7），多出config与scripts两个文件夹，config文件夹使我们重点关注的；

git add .
git commit –m “init”
npm run eject

图5 eject提示：在这里插入图片描述

图6 eject成功提示：在这里插入图片描述

图7 文件目录改变
在这里插入图片描述

3、先npm install 重新安装所有第三方库，再npm start检查项目是否正常运行，否则重新尝试；

4、配置webpack文件：cesium在使用时，需要配置webpack文件，具体官网有，但是有时webpack.config.js与许多教程不一样，只有这一个，而不是分为了两个（webpack.config.dev.js与webpack.config.prod.js）。这里给出修改方法：

（1）、找到webpack.config.js，在最上方引入插件，并配置相关路径（图8），如果你的文件夹结构和我是一样的，那么路径也直接用我的就行，不一样的话需要自己调整下；

const CopyWebpackPlugin = require('copy-webpack-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = 'src';

图8 引入插件配置路径：
在这里插入图片描述

（2）、在return中的output对象中加入sourcePrefix: ‘’，让webpack字符串缩进正确；

sourcePrefix: '',

图9 修改output：
在这里插入图片描述

（3）、在output底下添加amd对象：

    amd: {
    
    
      // Enable webpack-friendly use of require in Cesium
      toUrlUndefined: true,
    },

图10 amd：

在这里插入图片描述

（4）、在resolve的alias中加入如下内容：

alias: {
    
    
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
   cesium: path.resolve(cesiumSource),
},

图11 修改alias：
在这里插入图片描述

（5）、在plugins中加入打包时的配置，这里的plugins不是resolve中的，而是底下的一个单独plugins，Data项是用来存放本地数据的，当需要读取本地文件时（图片、模型）需要在src文件夹下新建data文件夹存放数据。

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, 'data'), to: 'Data'}
]),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin({
    
    
  // env.stringified,
  CESIUM_BASE_URL: JSON.stringify(''),
}),

图12 修改plugins：
在这里插入图片描述
图13 添加内容：

4、可视化cesium：在src/index.js中引入，将App.js中内容替换成，执行npm start：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

 
ReactDOM.render(<App />, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
App.js

import React, {
    
     Component } from 'react';

//引入cesium
import {
    
    Viewer} from "cesium/Cesium";
 
class App extends Component {
    
    
  componentDidMount() {
    
    
  		//地图初始化
		const viewer = new Viewer("cesiumContainer");
	}
  render() {
    
    
    return (
      <div id="cesiumContainer" />
    );
  }
}
 
export default App;

图14 app.js修改：
在这里插入图片描述

图15 最终结果：
在这里插入图片描述

Tomcat发布

完成配置之后，就是发布。Tomcat最近常用的工具，直接去官网下载安装包，坐这里是tomcat7，解压后即可，然后在项目文件夹中运行命令提示行，输入npm run build，最终会生成一个build文件夹，将其复制到tomcat的webapps下，并替换ROOT，即可完成发布。如有需要作其他修改，可自行查阅资料，网上很多。

遇到的问题：

1：运行npm start后出现错误TypeError: compilation.getCache is not a function。

解决办法：这是由于在安装copy-webpack-plugin时安装了最新的版本，后来我在package.json中将版本设为5.1.1，在重新npm install之后就好了。

2：只有黑色背景地球加不出来（浏览器F12后，看Network有几个文件请求不到404）

解决办法：在public下新建Index文件复制粘贴 node_modules\cesium\Source中的文件如下图：