之前在做开发的时候,需要用React框架搭建网页,并且加载cesium模型,由于本人开发纯小白上手,通过网上一些资料加上自己的摸索,终于搞定了。在这里分享一下我的学习过程,希望能对大家有所帮助。本文是纯手打原创文章,发现任何错误请留言,我会作出修改。
本文部分内容参考了https://www.jianshu.com/p/c980045cc4c4和https://blog.csdn.net/shine_scp/article/details/83311375,如果给两位博主造成麻烦,请联系我删除文章。
不说废话了,下面开始介绍流程:
React项目初始化
React是目前非常火热的前端开发框架,它独特的思想受到广大前端开发者的喜爱,这里用create-react-app来初始化react项目:
1、安装nodejs,网上有很多教程,这里不再赘述;
2、安装create-react-app:在命令提示行中输入 npm install –g create-react-app,全局安装,出现图1结果即为安装成功;
npm install -g create-react-app
图1 安装create-react-app
3、初始化react项目:输入create-react-app react-cesium,react-cesium是项目名称,可以自己随便起,稍等一会儿,出现图2结果,就完成了整个react项目初始化,其文件目录结构为图3所示;
create-react-app react-cesium
图2 初始化项目
图3 目录结构
4、输入cd react-cesium进入项目文件夹下,然后再输入npm start启动项目,打开浏览器输入localhost:3000,出现图4界面,即完成初始化。
cd react-cesium
npm start
图4 react界面
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';
import * as serviceWorker from './serviceWorker';
import 'cesium/Widgets/widgets.css'
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';
import Cesium from "cesium/Cesium";
class App extends Component {
componentDidMount() {
const viewer = new Cesium.Viewer("cesiumContainer");
}
render() {
return (
<div id="cesiumContainer" />
);
}
}
export default App;
图14 app.js修改
图15 最终结果
Tomcat发布
完成配置之后,就是发布。Tomcat最近常用的工具,直接去官网下载安装包,坐这里是tomcat7,解压后即可,然后在项目文件夹中运行命令提示行,输入npm run build,最终会生成一个build文件夹,将其复制到tomcat的webapps下,并替换ROOT,即可完成发布。如有需要作其他修改,可自行查阅资料,网上很多。
注:服务器部署时,可以下个安装版直接运行安装比较方便,但是最好不要装C盘。