UmiJS/Max结合Cesium开发日记

本人学生一枚，想要学习umi框架，今天先从umi-max了解了一下，顺便尝试如何引入cesium。 之前技术栈是vue，直接在index.html文件引入cesium的资源。Umi内部用了 HTML Webpack 插件，这个插件会在构建时候生成index.html 文件，因此源代码无法操作index.html。因此这种摆烂引入法行不通，想要借此搞明白如何通过配置文件将cesium引入到不同框架中。

官网介绍的npm安装方式，：

cesium打包文件中，Workers、Assets、Widgets、ThirdParty这四个类是必须的，后续读取模块都是要索取到这四个类的资源文件，因此路径很关键。

由于umimax没有默认的public存储静态资源文件，不能直接创建一个public文件夹存储，打包后也确实没有存储静态资源的文件夹，dist包中默认不会创建或者保留public文件夹。因此问题转化为如何将静态资源添加至dist包中。用webpack的copy属性将资源复制到dist文件中，config文件如下：

import { defineConfig } from '@umijs/max';
// 就是相当于config文件配置项，defineConfig更方便，可以不写
const cesiumSource = "node_modules/cesium/Build/Cesium";
const distPath = "./dist/public"
const path = require('path');
export default defineConfig({
    copy: [
        { from: path.join(cesiumSource, 'Workers'), to: path.join(distPath, 'Workers')},
        { from: path.join(cesiumSource, 'Assets'), to: path.join(distPath, 'Assets')},
        { from: path.join(cesiumSource, 'Widgets'), to: path.join(distPath, 'Widgets') },
        { from: path.join(cesiumSource, 'ThirdParty'), to: path.join(distPath, 'ThirdParty') }
    ],//只是构建过程中需要复制的文件或者目录
    define: {
        CESIUM_BASE_URL: '/public/'//允许在全局定义变量
    },
});

设置baseurl后，也就可以用了，在组件中使用：

import React, { useEffect, useRef } from 'react'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
import 'cesium/Source/Widgets/widgets.css';
import * as Cesium from 'cesium'
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl';

Cesium.Ion.defaultAccessToken = 'token'
buildModuleUrl.setBaseUrl(CESIUM_BASE_URL);
console.log('cesium的基础地址', CESIUM_BASE_URL)
const Map = () => {
    const cesiumContainer = useRef(null)
    console.log('获取虚拟DOM', cesiumContainer)
    useEffect(() => {
        if (cesiumContainer.current) {
            const viewer = new Cesium.Viewer(cesiumContainer.current, {
                maximumScreenSpaceError: 64,
                infoBox: false,
                animation: false,
                fullscreenButton: false,
                geocoder: false,
                navigationHelpButton: false,
                sceneModePicker: false,
                timeline: false,
                baseLayerPicker: false,
                selectionIndicator: false,
                homeButton: false,
               
            });
            const webKey = 'key'
            viewer.imageryLayers.addImageryProvider(
                new Cesium.WebMapTileServiceImageryProvider({
                    url:
                        'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
                        webKey,
                    layer: 'tdtAnnoLayer',
                    style: 'default',
                    format: 'image/jpeg',
                    tileMatrixSetID: 'GoogleMapsCompatible',
                    show: false,
                })
            )
            const entity1 = viewer.entities.add({
                rectangle: {
                    coordinates: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
                    material: new Cesium.StripeMaterialProperty({
                        evenColor: Cesium.Color.WHITE,
                        oddColor: Cesium.Color.BLUE,
                        repeat: 5
                    })
                }
            })
            viewer.flyTo(entity1)
        }
    }, []);
    return (
        <div>
            <div ref={cesiumContainer} style={{ width: '100%', height: '100%' }}></div>
        </div>
    )
}
export default Map

还得自己上手，对于静态资源等相关知识有了新的理解。 小白入门分享，大佬看个乐呵，有理解不到位的，还请指正。