基于React hooks＋TS＋Vite+Cesium搭建开发环境

创建项目

pnpm create vite

安装项目依赖

pnpm install cesium
pnpm install vite-plugin-cesium -D

配置vite.config.ts文件

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [react(), cesium()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ]
  }
});

编写组件

import {ReactElement, useEffect} from 'react';
import * as Cesium from 'cesium';

Cesium.Ion.defaultAccessToken = TOKEN.CESIUM;

const CreateViewer = (): ReactElement => {
  useEffect(() => {
    initMapViewer()
  }, [])
  const initMapViewer =  () => {
    new Cesium.Viewer('cesium-viewer')
  }
  return <div id={'cesium-viewer'} style={{width: '100%', height: '100%'}}/>;
}
export default CreateViewer;

启动项目

pnpm dev

结果

如果你觉得本文对你有帮助，不妨点个赞吧~~