Vue Function-based API RFC 一齣來，感覺 vue 越來越像 react 了。新立項目，決定嘗試下 react.js。下麵是 react 集成 cesium，核心部分是 webpack 的配置。 一、安裝 create-react-app npm install -g cre ...
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
