加载Cesium的React应用

研究了一整天，终于将cesium加入到了react中特此感谢 http://ecnuzlwang.cn/declarative-earth-part-1-cesium-webpack/

接下来我将一步一步实现如何将cesium 应用到react中
github项目地址

react 版本16.0.0 cesium 版本 1.41.0

1.首先创建一个react项目

create-react-app  react-cesium-demo

2.创建完成后将cesium 安装到新建的项目中

npm install cesium

3.执行npm run eject命令

由于我们用的Create-React-App不能直接获取Webpack配置文件，因为CRA默认隐藏了文件。所以我们要用CRA的“安全舱口”：npm run eject命令。
该命令可以复制CRA的配置文件到我们的项目中

npm run eject

完成后的目录会会多出config、scripts文件夹并且package.json文件执行也改变了，执行信息会提示，留意一下

目录.png

4.浏览$PROJECT/node_modules/cesium/Build/。你会发现两个文件夹，Cesium和CesiumUnminified。复制整个Cesium文件夹到PROJECT/public/，重命名为cesium。然后，删除文件夹里面的Cesium.js文件，

那么，你现在拥有以下文件夹架构：

publick目录.png

5.设置运行Cesium 所需的webpack 配置项

我们需要设置sourcePrefix: ' '，让Webpack正确缩进多行字符串。

然后设置unknownContextCritical: false，不让Webpack打印载入特定库时候的警告。

在设置 unknownContextRegExp: /^./.*$/,为了解决Error: Cannot find module "."该错误

在 "config/webpack.config.dev.js output"中加入

sourcePrefix.png

在 config/webpack.config.dev.js module中加入

module更改.png

以上配置需要在开发模式和产品模式中都配置

6.加载Cesium到应用中

在加载Cesium之前需要配置Cesium，让它知道如何为所有资源构造URL。需要调用Cesium自带的buildModuleUrl()函数。完成后，就可以加载Viewer实例并让Cesium工作。

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import "cesium/Source/Widgets/widgets.css";

import App from './App';

import registerServiceWorker from './registerServiceWorker';

import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";

buildModuleUrl.setBaseUrl('./cesium/');

ReactDOM.render(<App />, document.getElementById('root'));

registerServiceWorker();

然后，在componentDidMount方法中我们创建一个Cesium.Viewer实例，将真实节点的引用作为viewer的容器。

src/App.js

import React, { Component } from 'react';

import Viewer from "cesium/Source/Widgets/Viewer/Viewer";

class App extends Component {  
    componentDidMount() {
        this.viewer = new Viewer(this.cesiumContainer);
    }

    render() {
        return (
            <div>
                <div id="cesiumContainer" ref={ element => this.cesiumContainer = element }/>
            </div>
        );
    }
}

export default App

执行命令运行访问

npm start

成功运行后截图.png

最后编辑于：2018.01.17 21:41:07