1、创建项目
本文章是我学习Cesium时记录下来的，是我用来学习使用的。
使用vite+vue3创建项目，组件库使用element plus，项目地址在我的gitee仓库中有，https://gitee.com/the-world-keeps-blooming/my-vite-vue-cesium。
在vite中有一个关于Cesium的插件：vite-plugin-cesium。下面介绍如何在项目中使用这个插件，插件的网址如下所示：https://github.com/nshen/vite-plugin-cesium，这个插件的官网中有如何使用的说明。
npm i cesium vite-plugin-cesium vite -D
安装好对应的依赖之后，找到项目的vite.config.js文件，进行大概如下的配置。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入Cesium插件
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()]
})
然后在某一个vue文件中，进行配置。如我这里是放在了项目的src\views\cesium\cesium_hello_world\index.vue中。具体的vue代码如下所示。
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer');
})
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
结果如下图所示，出现地球就可以了。至于UI什么的，不要介意这个，将就这个看就行了。
2、配置自己的token
插件中使用的关于Cesium的token是官网提供的默认token，如果想要控制访问Cesium的某些资源，我们就需要使用自己的token了。具体的token申请官网在这里https://ion.cesium.com/tokens?page=1，具体的token可以根据下面的图片中找到。
2.1、修改为自己token的代码
对应的vue文件
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
// 对应的Cesium的token
let token = '你的token'
Cesium.Ion.defaultAccessToken = token
const viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
})
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
出现对应的地球就可以了，说明token配置成功了。
3、获得一个干净的地球
如上图所示的图片中，地球界面有很多对应的按钮，搜索框等内容。那么，我们该如何获取一个干净的地球呢？具体可以往后看。对应的vue文件的代码如下所示。
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
// 对应的Cesium的token
let token = '你的token'
Cesium.Ion.defaultAccessToken = token
const viewer = new Cesium.Viewer('cesiumContainer', {
// 搜索框
geocoder: false,
// home键
homeButton: false,
// 全屏按钮
fullscreenButton: false,
// 动画控件
animation: false,
// 场景模式选择器,就是控制二三维的那个
sceneModePicker: false,
// 时间轴
timeline: false,
// 导航帮助提示按钮
navigationHelpButton: false,
// 地图选择器
baseLayerPicker: false
});
})
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
display: none !important;
}
</style>
结果如下图所示：
从上图的结果中可以看出得到了一个纯净版的Cesium界面了。
4、加载Cesium官方提供的在线地形
具体vue的代码如下所示
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
// 对应的Cesium的token
let token = '你的token'
Cesium.Ion.defaultAccessToken = token
const viewer = new Cesium.Viewer('cesiumContainer', {
// 搜索框
geocoder: false,
// home键
homeButton: false,
// 全屏按钮
fullscreenButton: false,
// 动画控件
animation: false,
// 场景模式选择器,就是控制二三维的那个
sceneModePicker: false,
// 时间轴
timeline: false,
// 导航帮助提示按钮
navigationHelpButton: false,
// 地图选择器
baseLayerPicker: false,
// cesium 提供的官方地形
terrain: Cesium.Terrain.fromWorldTerrain()
});
// 飞行到某个位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(102.90, 27.23, 5600),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-15.0),
}
});
})
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
display: none !important;
}
</style>
结果如下所示，从图中可以看到有地形起伏了。
5、加载Cesium官方提供的在线建筑
具体vue的代码如下所示
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted( async () => {
// 对应的Cesium的token
let token = '你的token'
Cesium.Ion.defaultAccessToken = token
const viewer = new Cesium.Viewer('cesiumContainer', {
// 搜索框
geocoder: false,
// home键
homeButton: false,
// 全屏按钮
fullscreenButton: false,
// 动画控件
animation: false,
// 场景模式选择器,就是控制二三维的那个
sceneModePicker: false,
// 时间轴
timeline: false,
// 导航帮助提示按钮
navigationHelpButton: false,
// 地图选择器
baseLayerPicker: false,
// cesium 提供的官方地形
terrain: Cesium.Terrain.fromWorldTerrain()
});
// 飞行到某个位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(102.90, 27.23, 5600),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-15.0),
}
});
// 加载Cesium官方提供的建筑物，注意了，这里使用了await的语法
const buildingTileset = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingTileset);
})
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
display: none !important;
}
</style>
结果如下所示：
总结
因为加载地形和建筑物需要请求的网络资源挺多的，所以，项目中Cesium初始化的加载，只是加载出地球，得到一个纯净版的地球。如果需要地形和建筑物，直接复制文章中相关的代码到对应的vue组件中就可以了。
![[大语言模型-论文精读] 阿里巴巴-通过多阶段对比学习实现通用文本嵌入](https://i-blog.csdnimg.cn/direct/d47da0aeb15b4941b42c4d7efdd92fb7.png)
