Cesium概述
Cesium是一个基于JavaScript开发的WebGL三维地球和地图可视化库。
它利用了现代Web技术，如HTML5、WebGL和WebAssembly，来提供跨平台和跨浏览器的三维地理空间数据可视化。
Cesium的主要特点包括：
- 跨平台、跨浏览器：无需额外插件，即可在多种操作系统和浏览器上运行。
- 海量数据支持：Cesium定义了3D Tiles数据格式，支持大规模三维模型和地形数据的加载与渲染。
- 丰富的地图模式：支持三维、二维和哥伦布视图（2.5D），提供多种地图和地形图层选择。
- 交互功能：支持地址搜索、信息属性框等用户交互功能，以及全屏模型和WebVR虚拟现实体验。
Cesium应用场景
Cesium被广泛应用于多个领域，包括但不限于：
- 交通管理：用于模拟交通流量，进行交通规划和分析。
- 城市规划：辅助进行城市设计，展示城市规划的三维效果。
- 城市管理：帮助城市管理者进行城市监控和应急响应规划。
- 地形仿真：在军事和地质研究中模拟地形环境，进行战术训练和地质分析。
环境准备
开始使用Cesium之前，需要做一些基本的环境准备工作：
- 获取Cesium资源：
访问Cesium的官方网站和中文文档，了解如何获取Cesium的SDK和API文档。
中文文档
Cesium中文api文档 | Index - Cesium Documentation
官网
Cesium: The Platform for 3D Geospatial
例子
- 安装开发工具：
确保你的开发环境中安装了Node.js和npm（或pnpm），这些是JavaScript项目管理和打包的常用工具。
创建Cesium项目
创建一个Cesium项目的基本步骤如下：
1. 使用pnpm创建项目：
pnpm create vite 项目名2. 进入项目目录：
cd 项目名3. 安装项目依赖：
pnpminstall4. 安装Cesium依赖
在项目中安装Cesium及其构建插件：
pnpm i [email protected] vite-plugin-cesium5. 配置项目
修改项目的配置文件vite.config.js，以确保Cesium可以正确地与Vite.js一起工作：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
export default defineConfig({
plugins: [
vue(),
cesium()
]
})在Vue中引入Cesium
在app.vue中引入Cesium，并打印Cesium对象以确认安装成功：
import * as Cesium from 'cesium'console.log(Cesium)运行项目
使用以下命令启动开发服务器，并在浏览器中查看Cesium的加载效果：
npm run dev快速开始示例
在Cesium项目中，通常会首先创建一个Viewer对象，它提供了一个预配置的Cesium场景，用于显示地球或其他场景。以下是一个创建基本Cesium Viewer的示例：
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZGJ1OTBmMi0xYjNmLTRhZ2YtOTI1My0zNGIwOGUyNGFkYTU1LCJpZCI6MTE1MTg3LCJpYXQiOjE2Njg2NzM2NTB9.kQwPYhh1KTzNCwTFKow36f8DpBGhdDhrpzhHFUfTk'
// const esri = new Cesium.ArcGisMapServerImageryProvider({
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
// enablePickFeatures: false,
// });
// Viewer是一切API的开始
let viewer = new Cesium.Viewer('cesiumContainer', {
// imageryProvider: esri, //默认的谷歌地图影像 影像图层 ImageryLayer
//地形图层TerrainProvider
terrainProvider: Cesium.createWorldTerrain({
// requestWaterMask: true //水面特效
}),
})
})
</script>
<style scoped>
#cesiumContainer {
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>在上述代码中，我们首先设置了Cesium的访问令牌，然后创建了一个Viewer实例，并指定了容器的ID。
我们还设置了地形图层，以加载默认的世界地形数据。
添加了水面特效：
cesium中的各类控键：
有一些不常用的控件，可以通过下面的方式进行隐藏：
时间轴控件：
timeline:false,//时间轴控件动画控件：
animation:false,//动画控件搜索按钮：
geocoder:false,//搜索按钮主页按钮：
homeButton:false,//主页按钮投影方式按钮：
sceneModePicker:false,//投影方式按钮图层选择按钮：
baseLayerPicker:false,//图层选择按钮帮助手势按钮：
navigationHelpButton:false,//帮助手势按钮全屏按钮
fullscreenButton:false,//全屏按钮通过本教程，应该对Cesium有了一个基本的了解，并且能够开始创建自己的Cesium项目。在接下来的教程中，我们将深入探讨Cesium的更多高级特性和应用场景。