Cesium 地球加载

① 安装 vite-plugin-cesium

npm i -D vite-plugin-cesium

② 安装 cesium

npm i -S cesium

③ vite.config.js配置

④ CesiumViewers组件加载

<script setup>
import * as Cesium from 'cesium'
import CesiumNavigation from 'cesium-navigation-es6'
import { onMounted } from 'vue'

onMounted(() => {
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
  })
  Cesium.Ion.defaultAccessToken = 'your token'
  const viewer = new Cesium.Viewer('cesiumContainer', {
    timeline: false, //隐藏时间轴
    animation: false, //隐藏动画控制器
    geocoder: false, //隐藏地名查找控制器
    homeButton: false, //隐藏Home按钮
    sceneModePicker: false, //隐藏投影方式控制器
    baseLayerPicker: false, //隐藏图层选择控制器
    navigationHelpButton: false, //隐藏帮助按钮
    fullscreenButton: false, //隐藏全屏按钮
    infoBox: false,
    scene3DOnly: false,
    selectionIndicator: false, //是否显示选取指示器组件
    shouldAnimate: false, //自动播放动画控件
    shadows: false, //是否显示光照投射的阴影
    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
    sceneMode: Cesium.SceneMode.SCENE3D,
    imageryProvider: esri,
    // 加载地形
    terrainProvider: new Cesium.CesiumTerrainProvider({
      url: Cesium.IonResource.fromAssetId(1),
      requestVertexNormals: true,
      // 水体显示
      requestWaterMask: true
    })
  })
  // 默认视图
  viewer.camera.setView({
    destination: Cesium.Rectangle.fromDegrees(50, 0, 150, 80)
  })
  // 添加罗盘
  const navigation = new CesiumNavigation(viewer, {
    enableCompass: true
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
}
</style>

<style>
#navigationDiv {
  position: absolute;
  bottom: 7%;
  right: 1%;
  width: 100px;
  height: 300px;
}
.cesium-viewer-bottom {
  display: none;
}
.distance-legend {
  pointer-events: auto;
  position: absolute;
  left: 93%;
  bottom: 30px;
  height: 30px;
  width: 125px;
  box-sizing: content-box;
}
</style>

注意事项：注意Cesium版本问题，过高的版本部分代码将不支持，注意修改！！！