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

用户6297767

发布于 2023-11-21 08:45:03

3430

发布于 2023-11-21 08:45:03

文章被收录于专栏：前端少年汪的博客前端少年汪的博客

前言

书接上文，上篇文章介绍了《使用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

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项目的两种方式：

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

第一种方法

安装`vite-plugin-cesium`插件

npm i cesium vite-plugin-cesium vite -D

yarn add cesium vite-plugin-cesium vite -D

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

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组件中

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

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

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

第二种方法

第二种方法就是本地引入，把下载好的cesium依赖包（node_modules里面）复制放到public里面，然后在index.html里面引入cesium和css文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="./public/cesium/Build/Cesium/Cesium.js"></script>

    <link rel="stylesheet" href="./public/cesium/Build/CesiumUnminified/Widgets/widgets.css">

    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

重要的是这两行

<script type="text/javascript" src="./public/cesium/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./public/cesium/Build/CesiumUnminified/Widgets/widgets.css">