【GIS】Cesium入门：Cesium+Vite+Vue3搭建Demo

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，可以复制使用，如果没有，新建一个即可