基于React脚手架集成Cesium

文章目录

基于React脚手架集成Cesium

1. 安装环境

安装Node.js

https://nodejs.org/en/download/
全局安装Yarn
```
npm install -g yarn
```
全局安装React脚手架
```
npm install -g create-react-app
```

2. 创建项目

注意：项目名称中不能包含大写字母

create-react-app 项目名称

在生成的项目文件中是看不到webpack相关的配置文件的，原因是React脚手架将webpack相关的配置隐藏起来了，但是集成Cesium时需要修改Webpack的配置，我们可以执行一个package.json文件中的一个脚本：“eject”: “react-scripts eject”

yarn run eject

安装依赖包

yarn

3. 引入Cesium

安装cesium包，我这里指定了版本1.70.1

yarn add [email protected]

安装webpack相关依赖，注意指定版本，之前默认安装的最新版本，启动后报错：compilation.getCache is not a function

yarn add [email protected] --dev

4. 修改文件

修改文件之前先通过命令yarn start启动项目，查看是否正常。

之后停掉项目后，修改配置文件config/webpack.config.js。

添加const CopyWebpackPlugin = require('copy-webpack-plugin');

修改plugins属性

添加如下内容：

        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopyWebpackPlugin({
      
      
            patterns: [
                {
      
       from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' },
                {
      
       from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' },
                {
      
       from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' },
                {
      
       from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }
            ],
        }),
        new webpack.DefinePlugin({
      
      
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        }),

修改alias属性，添加如下内容，如果不加的话编译时会报错：Module not found: Can’t resolve 'cesium/Widgets/widgets.css’

  'cesium': path.resolve('node_modules/cesium/Source'),

修改src/index.js

添加内容：import 'cesium/Widgets/widgets.css'

修改src/App.js，内容如下

import React, {
      
       Component } from 'react';
import * as Cesium from "cesium/Cesium";
import './App.css';
 
class App extends Component {
      
      
  componentDidMount() {
      
      
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NWI5MGUzNi1mYWI3LTQzY2QtOGI0Ni0xZWYyNTAxNGM4N2MiLCJpZCI6MTI1OTgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjE0NDkyNTV9.hBH0PGSnKErc_yNhIePASUkr3QPDoo0KDX9uLpNBUns';
		const viewer = new Cesium.Viewer("cesiumContainer");
	}
  render() {
      
      
    return (
      <div id="cesiumContainer" />
    );
  }
}
 
export default App;

修改src/App.css，添加

#cesiumContainer {
      
      
  height: 100vh;
}

启动项目yarn start，查看效果