Vue Function-based API RFC 一出来,感觉 vue 越来越像 react 了。新立项目,决定尝试下 react.js。下面是 react 集成 cesium,核心部分是 webpack 的配置。
一、安装 create-react-app
npm install -g create-react-app
二、react 工程创建
create-react-app cesium-react
三、cesium 安装
npm install cesium --save
四、copy-webpack-plugin 安装
npm install copy-webpack-plugin --save-dev
五、提取 webpack 配置文件
create-react-app 创建的项目,默认会隐藏 webpack 的配置项,所以需要将 webpack 配置文件提取出来。
npm run eject
成功后,项目根目录下会多出二个文件夹,config scripts,其中 webpack 的配置文件 webpack.config.js 位于 config 文件夹。
六、webpack 配置
1、添加 Cesium module name
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 }
2、添加 static files 管理
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 }
七、Hello World
1、src/index.js 中引入样式
import 'cesium/Widgets/widgets.css'
2、src/App.js 初始化地图
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