1. 环境搭建
确保本地有node环境和npm
node -v
npm -v
2.项目搭建
2.1使用vite搭建Vue3项目
在自己创建代码的路径下面打开cmd终端,win11可以直接在文件资源管理器输入cmd即可打开终端,并且终端路径为你当前路径
然后执行创建项目命令
npm create vite@latest vue3-cesium-vite --template vue
完成后进入文件夹,执行npm install
cd vue3-cesium-vite
npm install
执行完成之后即可搭建完成项目,执行npm run dev
即可在浏览器中打开页面
这里建议使用VSCode打开项目文件夹vue3-cesium-vite,后续的命令在VSCode下面打开的终端进行执行
2.2安装Cesium和vite-plugin-cesium插件
在vite创建的vue项目中,我们可以借助vite-plugin-cesium来快速构建Cesium项目;vite-plugin-cesium是一个基于Vite构建工具的插件,用于在Vue.js应用程序中加载CesiumJS 3D地球和地图WebGL库。它简化了在Vue.js项目中使用CesiumJS的配置过程,让开发者可以更快速地集成CesiumJS到他们的项目中。
其官方地址为:https://github.com/vitejs/awesome-vite#plugins
在VSCode的终端中输入npm install cesium vite-plugin-cesium vite
来安装Cesium和vite-plugin-cesium插件
3代码编写
3.1修改vite.config.js文件,引入cesium
3.2创建CesiumViewer.vue
在components文件夹下面新建CesiumViewer.vue文件,并在模板中添加一个id为cesiumContainer的div
<template>
<div id="cesiumContainer"></div>
</template>
在script标签中引入Cesium,并在onMounted函数中创建Cesium.Viewer对象
<script setup>
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from 'vue';
onMounted(() => {
Cesium.Ion.defaultAccessToken = "替换成你的token";
const viewer = new Cesium.Viewer('cesiumContainer',{
animation:false, //去掉默认组件
baseLayerPicker:false,
fullscreenButton:false,
geocoder:false,
homeButton:false,
infoBox:false,
sceneModePicker:false,
selectionIndicator:false,
timeline:false,
navigationHelpButton:false,
navigationInstructionsInitiallyVisible:false,
});
viewer._cesiumWidget._creditContainer.style.display = 'none' //去掉版权信息
})
</script>
这里需要注意,需要把defaultAccessToken替换成你自己账号的token,具体获取token的方法见章节4
在App.vue中引入CesiumViewer
<script setup lang="ts">
import CesiumViewer from './components/CesiumViewer.vue';
</script>
<template>
<cesium-viewer></cesium-viewer>
</template>
<style scoped>
</style>
然后就可以使用npm run dev
运行起来查看效果了,这里我们在创建Viewer时将Cesium默认的一些组件都给去掉了,界面上就是一个简单的地球
如果运行起来发现样式有问题,记得在main.ts文件中删除默认的样式引用
4申请AccessToken
首先需要去官网注册一个Cesium ion账号
登录进去后点击token,一般会有一个默认的token,可以复制使用,如果没有,新建一个即可