react 地图可视化 cesium 篇

npm install -g create-react-app

npm install cesium --save

npm install copy-webpack-plugin --save-dev

npm run eject

 1 module.exports = function (webpackEnv) {
 2     ...
 3     return {
 4         ...
 5         resolve: {
 6             alias: {
 7                 // Cesium module name
 8                 cesium: path.resolve(__dirname, ‘../node_modules/cesium/Source‘)
 9             }
10         }
11     }
12 }

 1 const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
 2 
 3 module.exports = function (webpackEnv) {
 4     ...
 5     return {
 6         ...
 7         resolve: {
 8             alias: {
 9                 // Cesium module name
10                 cesium: path.resolve(__dirname, ‘../node_modules/cesium/Source‘)
11             }
12         },
13         plugins: [
14             ...
15             // Copy Cesium Assets, Widgets, and Workers to a static directory
16             new CopyWebpackPlugin([ { from: path.join(‘node_modules/cesium/Source‘, ‘../Build/Cesium/Workers‘), to: ‘Workers‘ } ]),
17             new CopyWebpackPlugin([ { from: path.join(‘node_modules/cesium/Source‘, ‘Assets‘), to: ‘Assets‘ } ]),
18             new CopyWebpackPlugin([ { from: path.join(‘node_modules/cesium/Source‘, ‘Widgets‘), to: ‘Widgets‘ } ]),
19             new webpack.DefinePlugin({
20                 // Define relative base path in cesium for loading assets
21                 CESIUM_BASE_URL: JSON.stringify(‘‘)
22             })
23         ]
24     }
25 }

import ‘cesium/Widgets/widgets.css‘

 1 import React, { Component } from ‘react‘;
 2 import Cesium from "cesium/Cesium";
 3 
 4 class App extends Component {
 5   componentDidMount() {
 6     Cesium.Ion.defaultAccessToken = ‘your_access_token‘;
 7     const viewer = new Cesium.Viewer("cesiumContainer");
 8   }
 9   render() {
10     return (
11       <div id="cesiumContainer" />
12     );
13   }
14 }
15 
16 export default App;

环境如下：
node: v12.5.0
npm: 6.9.0
create-react-app: 3.0.1