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

2023-11-21 08:45:03 浏览数 (2)

前言

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

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

0 人点赞