① 安装 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版本问题,过高的版本部分代码将不支持,注意修改!!!