基于arco框架 cesium开发

1、 创建arco项目，arco init www

        选择 create-react-app 、arco pro 完整版

2、验证项目创建成功 cd www / npm run dev

        打开 localhost:3000

3、加入cesium模块

        npm install cesium --save

        npm install copy-webpack-plugin --save

4、继续请求 npm run dev

        发现 报模型找不到错误，重新安装报错的模型

        npm install redux --save / @arcoxxx-color / loadsh

        继续请求 npm run dev。成功

5、加入cesium初始化代码

        import * as Cesium from "cesium";

        //...

        const view = new Cesium.Viewer('cesiumContainer');

        <div style={{width: '100vw',height: '100vh'}} id="cesiumContainer"></div>

6、报异常，为webpack版本导致

Module not found: Error: Can't resolve 'url' in '/Users/wq/04_tools/02_cesium/react/www/node_modules/cesium/Source/Core'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

找到 config-overrides.js，在addWebpackAlias加入需要resolve的模组，重新编译

addWebpackAlias({
 '@': path.resolve(__dirname, 'src'),
  zlib: false,
  url: false,
  http: false,
  https: false,
})

6、报异常，未指定CESIUM_BASE_URL

Unable to determine Cesium base URL automatically, try defining a global variable called CESIUM_BASE_URL.

找到 config-overrides.js，在addWebpackPlugin加入CESIUM_BASE_URL，重新编译

const webpack = require('webpack');

/*
...
*/

addWebpackPlugin(
  new webpack.DefinePlugin({
    CESIUM_BASE_URL: JSON.stringify('/'),
  }),
),

7、编译成功，但是mock报异常

mock.js:8363 
        
      
GET http://localhost:3000/Assets/approximateTerrainHeights.json 404 (Not Found)

移除mock。

npm uninstall mockjs --save

8、编译成功，但是资源报异常

Resource.js:2256 
        
GET http://localhost:3000/Assets/approximateTerrainHeights.json 404 (Not Found)

找到 config-overrides.js，在addWebpackPlugin加入CopyWebpackPlugin 资源，重新编译

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

/*
*/
    
addWebpackPlugin(
      new CopyWebpackPlugin({patterns:[{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]}),
    ),
addWebpackPlugin(
      new CopyWebpackPlugin({patterns:[{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]}),
    ),
addWebpackPlugin(
      new CopyWebpackPlugin({patterns:[{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]}),
    ),

9、地球显示，但是CSS不正确。在调用页面引入css

import 'cesium/Build/Cesium/Widgets/widgets.css'

10、加载成功

参考：

(97条消息) React+Cesium搭建网页并使用tomcat发布_路边的小酱油的博客-CSDN博客
(98条消息) Cesium 填坑之路_Giser_往事随风的博客-CSDN博客