如何使用Vite+React18创建Cesium项目？教你两种方式

前言

书接上文，上篇文章介绍了《使用Vite Vue3创建Cesium项目》，感觉还是对很多小伙伴有帮助的，那么这篇文章就介绍一下使用Vite React18创建Cesium项目。

先填一下上一篇文章埋下的坑

控制台会报错这个问题：

VM19:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

解决方法： 设置infoBox：false

代码语言：javascript复制

const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false
})

使用viet创建react18项目

pnpm create vite vite react18 cesium --template react-ts

进入项目 cd vite react18 cesium

安装依赖 pnpm install

运行项目 pnpm run dev

这个就是vite react18的初始化项目了。下面介绍基于react框架创建cesium项目的两种方式：

1. 使用cesium的vite插件 vite-plugin-cesium
2. 把cesium依赖包放到public文件夹下直接引入

第一种方法

安装vite-plugin-cesium插件

代码语言：javascript复制

npm i cesium vite-plugin-cesium vite -D

yarn add cesium vite-plugin-cesium vite -D

在vite.config.js文件中配置使用插件

代码语言：javascript复制

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),cesium()],
})

在App组件中初始化Cesium

首先清除默认样式，把index.css和App.js里面的默认样式都删除掉

然后在App.jsx组件中

代码语言：javascript复制

import * as Cesium from 'cesium'
import './App.css'
import {useEffect} from "react";

function App() {
    
    useEffect(() => {
        // 初始化Cesium
        const viewer = new Cesium.Viewer('cesiumContainer', {
            /*在给cesium使用html2canvas插件加截图保存控件时，提示错误Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.*/
            infoBox: false
        })
    }, [])

    return (
        <div id="cesiumContainer"/>
    );
}

export default App

记得设置一下cesiumContainer容器的宽高 App.css

代码语言：javascript复制

#cesiumContainer{
    width: 100vw;
    height: 100vh;
}

然后在运行项目打开浏览器就可以看到