Cesium基础教程

一、概述

Cesium是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。

• Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
• Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL。
• Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

二、安装

当前案例基于vue3+vite构建

1.安装插件

插件地址

npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D

2.配置

vite.config.js配置：

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({plugins: [cesium()]
});

三、创建一个Viewer

1、基础Viewer

<template><div id="cesiumContainer"></div>
</template><script lang="ts" setup>
import { onMounted } from "vue";
import { Viewer } from 'cesium';
onMounted(() => {const viewer = new Viewer('cesiumContainer');
})
</script>
<style lang="scss" scoped></style>

2、辅助按钮

1. Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
2. HomeButton : 首页位置，点击之后将视图跳转到默认视角。
3. SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。
4. BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。
5. NavigationHelpButton : 帮助提示，如何操作数字地球。
6. Animation :控制视窗动画的播放速度。
7. CreditsDisplay : 展示商标版权和数据源。
8. Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
9. FullscreenButton : 视察全屏按钮。

四、 Cesium Ion

在我们使用Cesium的过程中，如果没有申请ion，同时没有自己的数据源用的cesium提供的数据源，viewer的底部常常会提示一行小的英文字母。大意就是需要申请access token.

1. 首先需要去注册一个免费的Cesium ion账户。
2. 打开 Cesium ion 然后注册一个新的账户。
3. 点击"Access Token"，跳转到Access Tokens page页面。
4. 选择Default默