一、创建vue3+ts+vite项目
npm create vite cesium_vue3(项目名称)
回车，选择vue，再回车
- 选择ts，回车
- 进入项目
cd cesium_vue3
- 下载node_modules
npm install
- 运行项目
npm run dev
- 项目页面
二、打开vscode,删除无用代码
统统删掉，得到一个纯白页面
三、安装Cesium
- 安装Cesium
npm i cesium
- 安装vite-plugin-cesium
vite-plugin-cesium 是一个 Vite 插件，用于在 Vite 项目中集成 Cesium 库。它可以帮助您在 Vite 项目中使用 Cesium 3D 地图库，简化配置和提高开发效率。
npm i vite-plugin-cesium -D
- 在
vite.config.ts中引入vite-plugin-cesium插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()],
})
四、搭建Cesium页面
<script setup lang="ts">
import { onMounted } from "vue";
import * as Cesium from "cesium";
onMounted(() => {
new Cesium.Viewer("cesiumContainer");
});
</script>
<template>
<div id="cesiumContainer"></div>
</template>
<style scoped>
#cesiumContainer {
width: 100vw;
height: 100vh;
}
</style>
五、隐藏cesium默认控件
onMounted(() => {
new Cesium.Viewer("cesiumContainer", {
// 是否显示信息窗口
infoBox: false,
// 是否显示查询按钮
geocoder: false,
// 不显示home按钮
homeButton: false,
// 控制查看器的显示模式
sceneModePicker: false,
// 是否显示图层选择
baseLayerPicker: false,
// 是否显示帮助按钮
navigationHelpButton: false,
// 是否播放动画
animation: false,
// 是否显示时间轴
timeline: false,
// 是否显示全屏按钮
fullscreenButton: false,
});
});
隐藏底部logo以及文字
onMounted(() => {
const viewer = new Cesium.Viewer("cesiumContainer", {
// 是否显示信息窗口
infoBox: false,
// 是否显示查询按钮
geocoder: false,
// 不显示home按钮
homeButton: false,
// 控制查看器的显示模式
sceneModePicker: false,
// 是否显示图层选择
baseLayerPicker: false,
// 是否显示帮助按钮
navigationHelpButton: false,
// 是否播放动画
animation: false,
// 是否显示时间轴
timeline: false,
// 是否显示全屏按钮
fullscreenButton: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";
});
得到了一个纯地球~
