前言

最近在学习Cesium三维框架过程中，想把Cesium框架和umi框架相结合，在搭建过程中也遇到一些问题，下面是搭建的过程自己记录一下

安装umi

安装过程假设已经安装node环境，开始安装umi，官网地址

• 创建项目

mkdir cesiumdemo && cd cesiumdemo

• 通过官方工具构建项目

yarn create @umijs/umi-app

• 安装依赖

yarn

• 启动项目

yarn start

项目启动成功，在浏览器输入http://localhost/8000 即可看到页面

安装ceium

npm install cesium

• 项目整体结构图

• 配置环境

1.在工程目录下新建public文件夹，用于存放cesium的静态资源文件。 将 node_modules\cesium\Build\Cesium 路径下的Cesium文件夹复制值新建的public文件夹中，如下图

2.在umi配置文件umirc.ts添加以下信息

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const path = require('path');

#defineConfig 中添加copy对象
 copy: [
    { from: path.join(cesiumSource, cesiumWorkers), to: 'Cesium/Workers' },
    { from: path.join(cesiumSource, 'Assets'), to: 'Cesium/Assets' },
    { from: path.join(cesiumSource, 'Widgets'), to: 'Cesium/Widgets' },
  ],

3.新建场景容器组件 在组件中引入

import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

#这里配置的是刚才拷贝至public中的Cesium静态文件目录
window.CESIUM_BASE_URL = '../Cesium/';

以上配置已经完成 4.附上页面完整代码

import styles from './index.less';
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { useEffect, useState } from 'react';
import { Button } from 'antd';
import ToolBar from '../ToolBar';
import LongLatInfo from '../LongLatInfo';

window.CESIUM_BASE_URL = '../Cesium/';

export default function CesiumView() {
  const [viewer, setViewer] = useState(null as any);
  useEffect(() => {
    let config = {
      geocoder: false, // 位置查找工具
      homeButton: true, // 视角返回初始位置
      sceneModePicker: true, // 选择视角的模式（球体、平铺、斜视平铺）
      baseLayerPicker: false, // 图层选择器（地形影像服务）
      navigationHelpButton: true, // 导航帮助(手势，鼠标)
      animation: false, // 左下角仪表盘（动画器件）
      timeline: false, // 底部时间线
      fullscreenButton: true, // 全屏
      vrButton: true, // VR
    };

    const Viewer: any = new Cesium.Viewer('cesiumContainer', config);
    Viewer.scene.globe.depthTestAgainstTerrain = true;

    Viewer._cesiumWidget._creditContainer.style.display = 'none';
    setViewer(Viewer);
  }, []);

  return (
    <>
      <div id="cesiumContainer" className={styles.cesiumContainer}></div>
      {viewer && <LongLatInfo viewer={viewer} />}
    </>
  );
}

5.刷新页面，即可看见三维地图

以上简单配置完成