安装依赖
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>