【Cesium入门教程】第一课:Cesium简介与快速入门详细教程

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

例子

Cesium Sandcastle

  • 安装开发工具:

确保你的开发环境中安装了Node.js和npm(或pnpm),这些是JavaScript项目管理和打包的常用工具。

创建Cesium项目

创建一个Cesium项目的基本步骤如下:

1. 使用pnpm创建项目:

复制代码
pnpm create vite 项目名

2. 进入项目目录:

复制代码
cd 项目名

3. 安装项目依赖:

复制代码
pnpminstall

4. 安装Cesium依赖

在项目中安装Cesium及其构建插件:

复制代码
pnpm i cesium@1.99 vite-plugin-cesium

5. 配置项目

修改项目的配置文件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的更多高级特性和应用场景。

相关推荐
许白掰2 小时前
【stm32】HAL库开发——CubeMX配置RTC,单片机工作模式和看门狗
stm32·单片机·嵌入式硬件·学习·实时音视频
future14122 小时前
C#学习日记
开发语言·学习·c#
DIY机器人工房2 小时前
0.96寸OLED显示屏 江协科技学习笔记(36个知识点)
笔记·科技·stm32·单片机·嵌入式硬件·学习·江协科技
我是小哪吒2.04 小时前
书籍推荐-《对抗机器学习:攻击面、防御机制与人工智能中的学习理论》
人工智能·深度学习·学习·机器学习·ai·语言模型·大模型
✎ ﹏梦醒͜ღ҉繁华落℘5 小时前
WPF学习(四)
学习·wpf
✎ ﹏梦醒͜ღ҉繁华落℘5 小时前
WPF学习(动画)
学习·wpf
杨超越luckly6 小时前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
循环过三天6 小时前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
生如夏花℡6 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
之歆6 小时前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习