preface

Recently in the process of learning Cesium THREE-DIMENSIONAL framework, I want to combine Cesium framework and UMI framework. I also encountered some problems in the process of building. The following is the process of building for myself

Install umi

Installation Process Assume that the Node environment has been installed. Install UMI

  • Create a project

mkdir cesiumdemo && cd cesiumdemo

  • Build projects using official tools

yarn create @umijs/umi-app

  • Install dependencies

yarn

  • Start the project

yarn start

If the project is successfully started, enter http://localhost/8000 in the browser to view the page

Install ceium

npm install cesium

  • Overall project structure drawing

  • Configure the environment

1. Create a public folder in the project directory to store static cesium resource files. Copy the cesium folder under node_modules\cesium\Build\ cesium to the new public folder as shown in the following figure

2. Add the following information to the UMI configuration file umirc.ts

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '.. /Build/Cesium/Workers';
const path = require('path'); #defineConfig add copy objectcopy: [{from: path.join(cesiumSource, cesiumWorkers), to: 'Cesium/Workers' },
    { from: path.join(cesiumSource, 'Assets'), to: 'Cesium/Assets' },
    { from: path.join(cesiumSource, 'Widgets'), to: 'Cesium/Widgets'},].Copy the code

3. Create a scene container component and add it to the component

import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css'; The Cesium static file directory was copied to publicwindow.CESIUM_BASE_URL = '.. /Cesium/';
Copy the code

The above configuration is complete. 4. Attach the complete code of the page

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.// Location finder tool
      homeButton: true.// The Angle returns to the initial position
      sceneModePicker: true.// Select Angle mode (sphere, tile, squint tile)
      baseLayerPicker: false.// Layer selector (Terrain Image Service)
      navigationHelpButton: true.// Navigation help (gesture, mouse)
      animation: false.//
      timeline: false.// The bottom timeline
      fullscreenButton: true./ / full screen
      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} />}
    </>
  );
}
Copy the code

5. Refresh the page to see the 3D map

The above simple configuration is complete