【极速版】vite安装配置ceisum教程

Hello大家好，今天带来的是vite版本的cesium的安装教程，借助一个国人大佬写的插件vite-plugin-cesium，安装非常简单快捷，一起来看看吧！
1.安装vite插件

官网：https://github.com/nshen/vite-plugin-cesium

npm i cesium vite-plugin-cesium vite -D

2.引入插件

import cesium from 'vite-plugin-cesium'; 
export default defineConfig({
    
    
  plugins: [vue(),cesium()]
})

3.使用cesium
这里写的是vue3的代码：

<template>
    <div id="cesiumContainer" class="h-full"></div>
</template>

<script lang="ts" setup>
import {
      
       onMounted, ref } from 'vue';
import * as Cesium from 'cesium';

let viewer;
onMounted(() => {
      
      
    viewer = new Cesium.Viewer('cesiumContainer');
    viewer.entities.add({
      
      
        position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        point: {
      
      
            pixelSize: 10,
            color: Cesium.Color.BLUE,
        },
    });
});
</script>

<style>
#cesiumContainer {
      
      
    height: 600px;
    width: 100%;
}
</style>

4.viewer的极简配置
这个配置基本上只有一个球，其他都隐藏了。

  viewer = new Cesium.Viewer('cesiumContainer', {
    
    
      animation: false, //是否创建动画小器件，左下角仪表
      baseLayerPicker: false, //是否显示图层选择器
      fullscreenButton: false, //是否显示全屏按钮
      geocoder: false, //是否显示geocoder小器件，右上角查询按钮
      homeButton: false, //是否显示Home按钮
      infoBox: false, //是否显示信息框
      sceneModePicker: false, //是否显示3D/2D选择器
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, //是否显示时间轴
      sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
      navigationHelpButton: false, //是否显示右上角的帮助按钮
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      navigationInstructionsInitiallyVisible: false,
      showRenderLoopErrors: false, //是否显示渲染错误
      //设置背景透明
      orderIndependentTranslucency: false,
      contextOptions: {
    
    
          webgl: {
    
    
              alpha: true,
          },
      },
  });
  viewer._cesiumWidget._creditContainer.style.display = 'none'; //隐藏图标
  viewer._container.style.cursor = 'default';