react中使用Cesium

Cesium初始化的配置项说明

animation：是否显示动画控制器。
baseLayerPicker：是否允许用户选择基础图层。
fullscreenButton：是否显示全屏按钮。
vrButton：是否显示VR按钮。
geocoder：是否显示地理编码器，或应该包含哪些Geocoder服务对象。
homeButton：是否显示主页按钮。
infoBox：是否显示信息框。
sceneModePicker：是否显示场景模式选择器。
selectionIndicator：是否显示选择指示器。
timeline：是否显示时间轴。
navigationHelpButton：是否显示导航帮助按钮。
navigationInstructionsInitiallyVisible：在初始加载时，是否自动显示导航说明。
scene3DOnly：是否禁用2D地图模式。
shouldAnimate：是否自动运行动画。
clockViewModel：ClockViewModel对象，用于控制时间和动画。
selectedImageryProviderViewModel：当前选择的图像提供者。
imageryProviderViewModels：可用图像提供者。
selectedTerrainProviderViewModel：当前选择的地形提供者。
terrainProviderViewModels：可用地形提供者。
baseLayer：ImageryLayer对象，用于设置基础图层。
terrainProvider：TerrainProvider对象，用于设置地形提供者。
terrain：Terrain对象，用于控制地形的外观和行为。
skyBox：SkyBox对象，用于控制天空盒的外观和行为。
skyAtmosphere：SkyAtmosphere对象，用于控制大气影响的外观和行为。
fullscreenElement：全屏元素。
useDefaultRenderLoop：是否使用Cesium的默认渲染循环。
targetFrameRate：目标帧速率，以帧/秒为单位。
showRenderLoopErrors：是否在控制台输出渲染循环错误消息。
useBrowserRecommendedResolution：是否使用浏览器建议的分辨率。
automaticallyTrackDataSourceClocks：是否自动跟踪数据源时钟。
contextOptions：WebGL上下文选项。
sceneMode：场景模式（2D、3D或双眼立体）。
mapProjection：地图投影类型。
globe：Globe对象，用于控制球形地球的外观和行为。
orderIndependentTranslucency：是否启用无序透明度。
creditContainer：显示版权信息的元素。
creditViewport：版权信息元素的视口。
dataSources：DataSourceCollection对象，表示要可视化的数据源集合。
shadows：是否启用阴影。
terrainShadows：地形阴影类型。
mapMode2D：2D地图模式下地图行为。
projectionPicker：是否显示投影选择器。
blurActiveElementOnCanvasFocus：获取焦点时是否模糊当前活动元素。
requestRenderMode：渲染模式（RENDER_ONCE、ANIMATE、SCENE2D、SCENE3D和MORPH）。
maximumRenderTimeChange：每帧允许的最大渲染时间（毫秒）。
depthPlaneEllipsoidOffset：深度平面和椭球体之间的偏移量。
msaaSamples：抗锯齿采样级别。

安装vite-plugin-cesium插件

npm i 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()],
})

组件中使用
import * as Cesium from "cesium"
import { useEffect } from "react";

const Sert=()=>{
    useEffect(()=>{
        const viewer=new Cesium.Viewer("mars3dContainer",{
              /*在给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
            // terrainProvider:  Cesium.createWorldImageryAsync() ,
        })
        // return ()=>{
        //     viewer?.destroy();
        // }
    },[])

    return (<>
    <div id="mars3dContainer" style={{width:"80vw",height:"90vh"}}>

    </div>

        </>)
}
export default Sert;

还要把node_modules\cesium\Build\Cesium 目录下的

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ba99719f7132453c9291dcc6e7051ff5.png)
都要拷贝到根目录下的pubilc下即可

• Workers
• Assets
• ThirdParty
• Widgets

现在就显示3D地图了

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d13eadf450e4200a3b05cd8dd03018a.png)

如果不行