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

接下來我將一步一步實現(xiàn)如何將cesium 應(yīng)用到react中
github項目地址

react 版本16.0.0 cesium 版本 1.41.0

1.首先 創(chuàng)建一個react項目

create-react-app  react-cesium-demo

2.創(chuàng)建完成后將cesium 安裝到新建的項目中

npm install cesium

3.執(zhí)行npm run eject命令

由于我們用的Create-React-App不能直接獲取Webpack配置文件，因為CRA默認隱藏了文件。所以我們要用CRA的“安全艙口”：npm run eject命令。
該命令可以復(fù)制CRA的配置文件到我們的項目中

npm run eject

完成后的目錄會會多出config、scripts文件夾 并且package.json文件執(zhí)行也改變了， 執(zhí)行信息會提示，留意一下

目錄.png

4.瀏覽$PROJECT/node_modules/cesium/Build/。你會發(fā)現(xiàn)兩個文件夾，Cesium和CesiumUnminified。復(fù)制整個Cesium文件夾到PROJECT/public/，重命名為cesium。然后，刪除文件夾里面的Cesium.js文件，

那么，你現(xiàn)在擁有以下文件夾架構(gòu)：

publick目錄.png

5.設(shè)置運行Cesium 所需的webpack 配置項

我們需要設(shè)置sourcePrefix: ' '，讓W(xué)ebpack正確縮進多行字符串。

然后設(shè)置unknownContextCritical: false，不讓W(xué)ebpack打印載入特定庫時候的警告。

在設(shè)置 unknownContextRegExp: /^./.*$/,為了解決Error: Cannot find module "."該錯誤

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

sourcePrefix.png

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

module更改.png

以上配置需要在開發(fā)模式和產(chǎn)品模式中都配置

6.加載Cesium到應(yīng)用中

在加載Cesium之前需要配置Cesium，讓它知道如何為所有資源構(gòu)造URL。需要調(diào)用Cesium自帶的buildModuleUrl()函數(shù)。完成后，就可以加載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方法中我們創(chuàng)建一個Cesium.Viewer實例，將真實節(jié)點的引用作為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

執(zhí)行命令運行訪問

npm start

成功運行后截圖.png