侧边栏壁纸
博主头像
极简笔记博主等级

极简笔记,书写你的精彩程序人生!

  • 累计撰写 147 篇文章
  • 累计创建 24 个标签
  • 累计收到 8 条评论

目 录CONTENT

文章目录

Cesium三维地球可视化从入门到进阶

极简笔记
2022-10-15 / 0 评论 / 32 点赞 / 10,318 阅读 / 3,166 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-10-15,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

前言

🎯 从今天起开始陆续的更新 Cesium 三维地球可视化从入门到进阶专栏的系列文章了, 如果你也对 三维可视化比较感兴趣的话,欢迎关注我一起学习

🎯 本次专栏所有案例都基于 Vue3 + Vite3 + TypeScript + CesiumJS 开发,并且所有案列的代码都会统一放到 github仓库中,开放给大家 免费学习使用

🎯 这里奉上 📚Github 仓库地址:https://github.com/xushanpei/Cesium_Study_Cases

CesiumJS 概述

CesiumJS 是一个用于显示 三维地球地图的开源 js 库。支持 3D, 2.5D, 2D 形式的地图展示,它可以用来显示海量 三维模型数据、影像数据、地形高程数据、矢量数据等等。同时也可以自行 绘制图形高亮区域等,且支持绝大多数的浏览器和移动端

主要功能介绍

  • 使用 3d tiles 格式流式加载各种不同的 3d 数据,包含 倾斜摄影模型、三维建筑物CADBIM 的外部和内部,点云数据。并支持样式配置和用户交互操作。
  • 全球高精度 地形数据可视化,支持地形夸张效果、以及可编程实现的 等高线坡度分析效果。
  • 支持多种资源的图像图层,包括 WMSTMSWMTS 以及时序图像。图像支持透明度 叠加亮度对比度GAMMA色调饱和度都可以动态调整。
  • 支持标准的 矢量格式 KMLGeoJSONTopoJSON、以及矢量的 贴地效果。
  • 三维模型支持 gltf2.0 标准的 PRB 材质、动画蒙皮变形效果。
  • 使用 CZML 支持动态时序数据的展示。
  • 支持各种几何体:线标注公告牌立方体球体椭圆体圆柱体走廊管径墙体
  • 可视化效果包括:基于太阳位置的 阴影自身阴影柔和阴影
  • 支持 大气太阳阳光月亮星星水面
  • 粒子特效:火花
  • 地形模型3d tiles 模型的面裁剪。
  • 对象 点选地形点选
  • 支持鼠标和触摸操作的 缩放渲染惯性平移飞行任意视角地形碰撞检测
  • 支持 3d 地球、2d地图、2.5d 哥伦布模式。3d 视图可以使用透视和正视两种投影方式。
  • 支持 标注公告牌的聚集效果。

基础环境搭建

Vue3 环境搭建

首先确保你安装了 Node.js(Node 安装过程这里不做过多讲解,直接官网下载安装即可),然后在 命令行运行以下命令:

npm init vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript测试支持之类的可选功能提示, 这里按照个人需求安装选择对应的功能即可:

✔ Project name: … <cesium-study-cases>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

更多的项目配置以及使用教程,可以参考我之前的写的文章:

🔥Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架

🔥Vue3.x script setup 语法糖详解,助力快速上手 Vue3.x

🔥 最详细的 Vue3 + TypeScript 使用教程

安装 Cesium

目前 Vite 项目下安装 CesiumJS 有两种方式:

  1. 直接到官方 下载源码引入到项目中使用
  2. npm 方式结合使用 Vite 插件 vite-plugin-cesium 来安装

下载源码安装

打开官网: https://www.cesium.com/ => Platform => CesiumJS

点击 下载,下载完成后 解压,拷贝 Build 目录下的 Cesium 下的所有内容到项目的 public 目录下即可

入口文件 index.html 中引入:

<link rel="stylesheet" href="/cesium/Widgets/widgets.css" />
<script src="/cesium/Cesium.js"></script>

npm 下载安装

npm i cesium
npm i -D vite-plugin-cesium

vite.config.ts 中配置:

import cesium from "vite-plugin-cesium"; // 引入插件

export default defineConfig({
  plugins: [cesium()],
});

以上两种方式任选一种安装即可,本次项目中的采用的是 第二种 npm 安装的方式

让 VScode 可以提示 Cesium 配置

npm i -S @types/cesium

好了,基础的环境配置好了,下面来创建一个属于自己的三维地球吧!!!

创建一个属于自己的三维地球

申请 Token

在动手写代码之前,记得先去 Cesium 申请一个 Token

Cesium 建议开发者在开发前申请一个单独的 令牌(token),这个 Token 的作用是可以在 Cesium项目中调用 地图地形服务。

打开 https://cesium.com/ion 网址注册登录自己的账号

Access Tokens界面 Create token

给自己的 Token 定义一个名称,然后根据自己的需求 勾选对应的功能即可