Cesium 初始化地球

Cesium 初始化地球

1.项目/环境搭建

新建一个React项目，然后npm安装一下Cesium

npm install cesium
// 或者
cnpm install cesium
// 或者
yarn add cesium

另外，react项目中集成Cesium需要配置webpack，因此需要安装copy-webpack-plugin插件并把webpack给暴露出来。

安装copy-webpack-plugin，注意插件的版本不要高于7！！！

npm install copy-webpack-plugin@6.4.1
// 或者
cnpm install copy-webpack-plugin@6.4.1

运行命令：npm run eject或者yarn eject将webpack配置给暴露出来，执行完之后你就会发现项目中多了几个文件夹，接下去就是要修改webpack配置文件，打开config文件夹下的webpack.config.js文件：

// 先一模一样照着写就行，申明资源路径
// Cesium源码所在目录
const CopyWebpackPlugin = require('copy-webpack-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = 'src';

在return中的output对象中加入sourcePrefix: ‘’，让webpack字符串缩进正确。

在output下面添加同级amd对象：

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

修改resolve中的alias：

alias: {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
   cesium: path.resolve(cesiumSource),  // 新增这一行数据即可
},

在plugins中加入打包时的配置(注意，这里的plugins不是resolve下的plugins，而是与它同级的plugins。)：

new CopyWebpackPlugin(
{
    patterns: [
    	{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
    ]
}),
new CopyWebpackPlugin(
{
    patterns: [
    	{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
    ]
}
),
new CopyWebpackPlugin(
{
    patterns: [
    	{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
    ]
}
),
// new CopyWebpackPlugin(
//   {
//     patterns: [
//       { from: path.join(fileFolder, 'data'), to: 'Data' }
//     ]
//   }
// ),//data项是用来存放本地数据的，当需要读取本地文件时（图片、模型）需要在src文件夹下新建data文件夹存放数据，没有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(''),
}),

配置loader：

由于在 ./node_modules/cesium/Source/ThirdParty/zip.js文件中使用了import.meta语法，webpack 默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。执行下面的命令：

npm install @open-wc/webpack-import-meta-loader --save-dev
// 或者
cnpm install @open-wc/webpack-import-meta-loader --save-dev

然后在webpack.config.js中添加：

module: {
 rules: [
     {
         test: /\.js$/,
         use: {
         	loader: '@open-wc/webpack-import-meta-loader',
         },
     },
 ]}

至此为止，项目的环境以及基本搭建完毕。

2.初始化代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'cesium/Widgets/widgets.css'

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

App.js

import React, { Component } from 'react';
import { Viewer } from "cesium/Cesium";
export default class App extends Component {
  componentDidMount() {
    //地图初始化
    const viewer = new Viewer("cesiumContainer");
  }
  render() {
    return (
      <div id="cesiumContainer" />
    );
  }
}

App.css

#cesiumContainer {
  height: 100vh;
}

完事之后npm start一下或者yarn start一下：就能看到经典地球了：