Cesium集成到umi框架

1.安装cesium 和 resium(cesium的react组件,可以选择不安装)

npm install --save cesium resium

yarn add cesium resium

2. 拷贝依赖到public

将 node_modules\cesium\Build\Cesium 文件夹下的Assets、ThirdParty、Widgets、Workers 四个文件夹拷贝到public下的Cesium文件夹下。

3.在config/config.ts增加如下配置

  copy: [
    { from: "node_modules/cesium/Build/Cesium/Workers", to: "dist/Cesium/Workers" },
    { from: "node_modules/cesium/Build/Cesium/ThirdParty", to: "dist/Cesium/ThirdParty" },
    { from: "node_modules/cesium/Build/Cesium/Assets", to: "dist/Cesium/Assets" },
    { from: "node_modules/cesium/Build/Cesium/Widgets", to: "dist/Cesium/Widgets" },
  ],
  define: {
    CESIUM_BASE_URL: "/Cesium"
  },
  jsMinifier:'terser',

4.在src/app.ts中导入样式文件

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

5.在新建的页面中使用组件

使用resium

import { Viewer } from "resium";  
  
function App() {  
return <Viewer />;  
}  
  
export default App;

使用原生的cesium

import React, {Component} from 'react';
import {Viewer,Terrain,Cartesian3,Math} from 'cesium';
class Login extends Component {
  componentDidMount() {
    const viewer = new Viewer('cesiumContainer', {
      terrain: Terrain.fromWorldTerrain(),
    });    
    viewer.camera.flyTo({
      destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Math.toRadians(0.0),
        pitch: Math.toRadians(-15.0),
      }
    });
  }
  render() {
    return<div id="cesiumContainer" />
  }
}
export default Login;

6.关于其他打包工具中cesium的集成方式

参考Installation | Resium (reearth.io)