electron-react-boilerplate集成cesium

網上找了好久沒找到任何electron-react-boilerplate集成cesium的資料

原因:
1.使用electron-react-boilerplate的人本來就不多
2.使用electron-react-boilerplate並且要集成react-cesium的人就更少了
摳了兩天腦殼之後終於搞出來了.

以下是步驟:
首先安裝cesium和resium
cnpm install --save cesium resium
然後就是需要注意的地方了
更改webpack配置:
網上的配置各種嘗試之後, 還是不行.最後自己結合網上的配置再摸索摸索
首先安裝依賴包,
copy-webpack-plugin css-loader style-loader url-loader strip-pragma-loader
可以先查看以下自己的package.json, 缺啥裝啥, 我只缺copy-webpack-plugin和strip-pragma-loader, 所以我就是
cnpm install --save-dev copy-webpack-plugin strip-pragma-loader
接下來, 找到項目下的config 文件夾下的 webpack.config.renderer.dev.babel.js 和 webpack.config.renderer.prod.babel.js
以下的配置都是在這兩個文件夾中都要配置的哦.

1.定義cesium的路徑:

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

2.更改resolve的alias
原:

  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },

改爲:

  resolve: {
    alias: {
      cesium$: 'cesium/Source/Cesium',
      // cesium$: 'cesium/Cesium',
      cesium: 'cesium/Source',
      'react-dom': '@hot-loader/react-dom'
    }
  },

PS: 官方給的配置是cesium$: 'cesium/Cesium', 但是我看了一下文檔結構Cesium路徑不對,

不知道是不是官方文檔沒更新, 所以我自己改爲了cesium$: 'cesium/Source/Cesium', 暫時還沒發現這裏有什麼用或BUG.
3.引入copy-webpack-plugin

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

plugins中添加一項:

{
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(cesiumSource, cesiumWorkers),
        to: "Workers",
      },
      {
        from: path.join(cesiumSource, "Assets"),
        to: "Assets",
      },
      {
        from: path.join(cesiumSource, "Widgets"),
        to: "Widgets",
      },
    ]),
  ];
}

4.添加CESIUM_BASE_URL, CESIUM_BASE_URL定義Cesium從哪裏加載資源

{
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(cesiumSource, cesiumWorkers),
        to: "Workers",
      },
      {
        from: path.join(cesiumSource, "Assets"),
        to: "Assets",
      },
      {
        from: path.join(cesiumSource, "Widgets"),
        to: "Widgets",
      },
    ]),
    new webpack.DefinePlugin({
      // CESIUM_BASE_URL: JSON.stringify('')
      CESIUM_BASE_URL: JSON.stringify(`../${cesiumSource}`)
    }),
  ];
}

ps: 官方文檔爲CESIUM_BASE_URL: JSON.stringify(''), 但是我這邊是會出錯的, 應該是webpack配置了publicPath的原因. 所以我改爲了下方之後才能正確找到資源

CESIUM_BASE_URL: JSON.stringify(`../${cesiumSource}`)

5.引入css
官方爲在入口index.js中引入import "cesium/Widgets/widgets.css";;我試了一下是不可以的.
最開始我以爲是路徑原因, 改爲了import "cesium/Source/Widgets/widgets.css";, 仍然不生效.
沒辦法, 我就把widgets.css拷出來了. 從node_modules/cesium/Build/Cesium/Weidgets/widgets.css, 拷貝至app/dist/widgets.css.
然後在app/app.html中添加

<style type="text/css">
  @import url('./dist/widgets.css');
  #cesiumContainer {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>

如果有對webpack比較熟悉的同學, 這裏配置後能在index.js中引入widgets.css的歡迎聯繫我.
至此, 配置就完成了
6.引入Viewer

import { Viewer } from 'resium';

render() {
    return (
      <div>
        <Viewer style={{height: '100%'}} />
      </div>
    );
  }