umijs框架加载cesium

创建umi项目，yarn create umi

选择app

选择是否使用typescript (N)

选择依赖

yarn

yarn start

项目创建完成后，添加cesium

yarn add cesium

下载版本是1.67，不同版本配置方式可能不一样，注意版本。

首先在.umirc.js文件中添加以下常量

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

在配置输出对象中添加 copy配置

copy:[

  {from:path.join(cesiumSource,cesiumWorkers),to:'Workers'},

  {from:path.join(cesiumSource,'Assets'),to:'Assets'},

  {from:path.join(cesiumSource,'Widgets'),to:'Widgets'},

],

如图：

在components文件夹下，建立CesiumViewer.js，封装地图组件

 

import React ,{Component} from 'react';

import {connect} from 'dva';

import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';

import "cesium/Source/Widgets/widgets.css";



class CesiumViewer extends Component{

  constructor(){

    super();



  }

  componentDidMount(){

    this.viewer = new Viewer(this.cesiumContainer);

  }



  render(){

    return(

      <div id='cesium-container' ref={element =>this.cesiumContainer=element} />

);

}

}

export default  CesiumViewer;

 

在pages文件夹下index.js中使用

import 'cesium/Source/Widgets/widgets.css';

import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl';

import CesiumViewer from '@/components/CesiumViewer';

buildModuleUrl.setBaseUrl('../cesium');

 

export default function() {

  return (

    <div >

     <CesiumViewer />

    </div>

  );

}