react+CesiumJS

Cesium配置修改

本文只是在使用过程遇到的一些问题,方便以后在使用。
参考博客地址

配置的版本

在这里插入图片描述

1、安装第三方库:

npm install cesium
npm install copy-webpack-plugin

2、配置webpack文件:cesium在使用时,需要配置webpack文件
文件路径:node_module/react-scripts/webpack.config.js

在这里插入图片描述
(1)找到webpack.config.js,在最上方引入插件,并配置相关路径

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

在这里插入图片描述
(2)在return中的output对象中加入sourcePrefix: ‘’,让webpack字符串缩进正确

sourcePrefix: '',

在这里插入图片描述
(3)在output底下添加amd对象:

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

在这里插入图片描述
(4)在resolve的alias中加入如下内容:

   cesium: path.resolve(cesiumSource),

在这里插入图片描述
(5)在plugins中加入打包时的配置,这里的plugins不是resolve中的,而是底下的一个单独plugins,Data项是用来存放本地数据的,当需要读取本地文件时(图片、模型)需要在src文件夹下新建data文件夹存放数据

new CopyWebpackPlugin([
  { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
]),
new CopyWebpackPlugin([
  { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
]),
new CopyWebpackPlugin([
  { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
]),
new CopyWebpackPlugin([
  { 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(''),
}),

在这里插入图片描述
在这里插入图片描述
(6)修改App,js

import React, { Component } from 'react';
import * as widget from "cesium/Widgets/widgets.css";
import * as Cesium from 'cesium/Cesium'

 
class App extends Component {
  componentDidMount() {
		const viewer = new Cesium.Viewer("cesiumContainer");
	}
  render() {
    return (
      <div id="cesiumContainer" />
    );
  }
}
 
export default App;

在这里插入图片描述

最终结果

在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论 6
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值