cesium 新建模型_React-Cesium搭建地图可视化

初始化react项目（环境配置在我的文章中讲过）

create-react-app react-cesium

输入cd react-cesium进入项目文件夹下，输入npm start启动项目，如浏览器出现地址为localhost:3000页面且显示React图标即完成初始化。

Cesium配置修改

下文下载依赖包尽量使用npm下载；

1、安装第三方库

npm install cesium --save
npm install copy-webpack-plugin --save

2、修改配置文件

由于create-react-app是基于webpack的项目，生成时自动隐藏webpack配置项，需要把webpack配置文件暴露出来，由于npm run eject过程不可逆，建议先行修改git配置再执行eject；如未修改git配置情况下提前暴露，则直接删除git隐藏文件夹。

git add .
git commit –m “init”
npm run eject

成功后项目根目录下会多出config、scripts两个配置文件夹。

3、为确保项目正常执行，先npm install 重新安装所有第三方库，再npm start检查项目是否正常运行，否则重新尝试；

4、找到webpack.config.js，在最上方引入插件

const CopyWebpackPlugin = require('copy-webpack-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = 'src';

引入插件

5、在return中的output对象中加如下内容，让webpack字符串缩进正确

sourcePrefix: '',

添加sourcePrefix: '',

6、在output底下添加amd对象

amd: {
      // Enable webpack-friendly use of require in Cesium
      toUrlUndefined: true,
},

添加amd对象

7、在resolve的alias中加入如内容

alias: {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
   cesium: path.resolve(cesiumSource),
},

8、在plugins对象下添加配置（注意是与resolve同级下的plugins对象）

Data项是用来存放本地数据的，当需要读取本地文件时（图片、模型）需要在src文件夹下新建data文件夹存放数据。

new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(fileFolder, 'data'), to: 'Data' }//无文件时先注释
        ]
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin({
        // env.stringified,
        CESIUM_BASE_URL: JSON.stringify(''),
}),

9、index.js下：

import React from 'react';
import ReactDOM from 'react-dom';
import './style/base.css';
import App from './App';
import * as serviceWorker from './lib/serviceWorker';

import 'cesium/Widgets/widgets.css';


ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

10、App.js下：

import React, { Component } from 'react';
import * as Cesium  from "cesium/Cesium";
 
class App extends Component {
  componentDidMount() {
		const viewer = new Cesium.Viewer("cesiumContainer");
	}
  render() {
    return (
      

    );
  }
}
export default App;

最后npm start