cesium+vue

安装依赖

yarn add -D cesium vite vite-plugin-cesium

创建 vite.config.js

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
    plugins: [cesium()],
});

默认不设置加载出来的cesium如下所示，若要隐藏右上角按钮如下代码所示：

<template>
  <div>
    <h4>3dTEST</h4>
    <div class="cesiumContainer" id="cesiumContainer"></div>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted, ref} from 'vue'
const viewerCS=ref("")

onMounted(()=>{
 viewerCS.value = new Cesium.Viewer('cesiumContainer',{
   geocoder:false,//右上角搜索：输入搜索的位置
   homeButton:false,//右上角小房子:视角返回最初位置
   sceneModePicker:false,//右上角小球：以2d或3d展示
   baseLayerPicker:false,//右上角地图标志：修改地图或地形服务
   navigationHelpButton:false,//右上角的？号：导航帮助按钮
   animation:false//左下角动画控制器
 });
})

</script>