Vue Function-based API RFC 一出來,感受 vue 愈來愈像 react 了。新立項目,決定嘗試下 react.js。下面是 react 集成 cesium,核心部分是 webpack 的配置。javascript
npm install -g create-react-app
複製代碼
create-react-app cesium-react
複製代碼
npm install cesium --save
複製代碼
npm install copy-webpack-plugin --save-dev
複製代碼
create-react-app 建立的項目,默認會隱藏 webpack 的配置項,因此須要將 webpack 配置文件提取出來。css
npm run eject
複製代碼
成功後,項目根目錄下會多出二個文件夾,config scripts,其中 webpack 的配置文件 webpack.config.js 位於 config 文件夾。html
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
}
}
}
複製代碼
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
},
plugins: [
...
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
]
}
}
複製代碼
import 'cesium/Widgets/widgets.css'
複製代碼
import React, { Component } from 'react';
import Cesium from "cesium/Cesium";
class App extends Component {
componentDidMount() {
Cesium.Ion.defaultAccessToken = 'your_access_token';
const viewer = new Cesium.Viewer("cesiumContainer");
}
render() {
return (
<div id="cesiumContainer" /> ); } } export default App; 複製代碼
環境以下:vue
node: v12.5.0
npm: 6.9.0
create-react-app: 3.0.1
複製代碼
小專欄地址:xiaozhuanlan.com/react-cesiu…java