在React中使用Cesium的最佳实践（一）

在一个使用webpack打包的React项目里面使用Cesium

Cesium 是目前唯一且流行的GIS三维显示库了，下面简单介绍如何在react引入并简单使用。

demo代码

初始化项目

使用create-react-app 创建一个带typescript的模板项目，然后直接eject。

yarn create react-app cesium-app --template typescript
cd cesium-app
yarn eject

cesium在1.70版本之后自带类型定义，不需要手动安装@types/cesium

yarn add cesium

改配置

官方有教程 cesium.com/docs/tutori…，直接跳到“Add CesiumJS to a webpack app“这个章节。

下面按照官方教程和自己的理解简要说一下：

首先Cesium是一个很复杂的库， 要支持多种使用方式，所以和传统的组件库开箱即用不一样，需要手动在打包流程中进行配置。

Cesium库内包括预打包的整个Cesium库文件和源代码，如果是其他方式使用，直接引用一个3.4M大小的 /node_modules/cesium/Build/Cesium/Cesium.js 即可。不过既然是使用webpack了，当然要好好利用webpack的依赖优化功能，只引入需要用到的模块即可。官方的webpack教程内说需要手动设置alias，不过在1.75.0版本中直接import即可。

需要改动的部分webpack配置如下：

• 添加一个定义全局变量的插件，指向cesium的根路径，目前为空

    new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })

• 添加复制文件的插件，将cesium自带的一些资产文件复制到生成目录：

yarn add -D copy-webpack-plugin

添加一个全局常量

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

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

整个修改如下：

在React中使用：

直接上代码：

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

function App() {
    useEffect(() => {
        new Cesium.Viewer("cesium-container")
    }, [])
    return (
        <div className="App">
            <div id={"cesium-container"}/>
        </div>
    );
}

export default App;

生成的文件压缩后大小为： 如果使用命名导入：

// @ts-ignore
import Viewer  from "cesium/Source/Widgets/Viewer/Viewer"

生成的大小为： 只能说聊胜于无吧。