【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的更多高级特性和应用场景。

相关推荐
清纯世纪8 小时前
Arcgis 10.7 矢量的分区统计
arcgis
iFulling9 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip
香蕉可乐荷包蛋9 小时前
AI算法之图像识别与分类
人工智能·学习·算法
xiaoli232710 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号10 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
LGGGGGQ11 小时前
嵌入式学习-PyTorch(7)-day23
人工智能·pytorch·学习
stm 学习ing11 小时前
Python暑期学习笔记3
笔记·python·学习
屁股割了还要学11 小时前
【C语言进阶】内存函数
c语言·开发语言·学习·算法·青少年编程
靴子学长12 小时前
Lotus-基于大模型的查询引擎 -开源学习整理
python·学习·自然语言处理