react 地图可视化 cesium 篇

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

 module.exports = function (webpackEnv) {
     ...
     return {
         ...
         resolve: {
             alias: {
                 // Cesium module name
                 cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
             }
         }
     }
 }

2、添加 static files 管理

 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('')
             })
         ]
     }
 }

七、Hello World

1、src/index.js 中引入样式

import 'cesium/Widgets/widgets.css'

2、src/App.js 初始化地图

 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;

 

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