创建项目
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
结果
如果你觉得本文对你有帮助,不妨点个赞吧~~