更多Cesium示例代码：Cesium Sandcastle 

本地安装cesium 

安装vite-plugin-cesium：

npm i -D vite-plugin-cesium

 安装cesium：

npm i -S cesium

vite.config.js中配置如下：

import cesium from 'vite-plugin-cesium';

 示例：

<template>
    <div id="cesiumContainer"></div>
  </template>
  
  <script setup>
  import * as Cesium from 'cesium';
  import { onMounted } from 'vue';
  onMounted(() => {
    const viewer = new Cesium.Viewer('cesiumContainer',{
      infoBox: false, // 禁用沙箱，解决控制台报错
    });
  })
  
  </script>
  
  <style scoped>
  #cesiumContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  </style>

在线引入cesium

在index.html中引入以下js和css文件，即可使用cesium了 

  <!-- 引入Cesium -->
  <script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

如果报错的话，就使用以下文件：

<link href="http://file.ljgis.com/cesium/latest/Widgets/widgets.css" rel="stylesheet">
<script src="http://file.ljgis.com/cesium/latest/Cesium.js"></script>

效果图： 

 示例代码：

<template>
  <div class='test'>
    <div id="map3d"></div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';

onMounted(() => {
  new Cesium.Viewer("map3d", {
    infoBox: false,
    selectionIndicator: false,
    navigation: false,
    animation: false,
    shouldAnimate: false,
    timeline: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
  });
})

</script>
<style lang="scss" scoped>
.test {
  width: 100vw;
  height: 100vh;

  #map3d {
    height: 100%;
  }
}
</style>