迈向三维：vue3+Cesium.js三维WebGIS项目实战

写在前面：随着市场对数字孪生的需求日益增多，对于前端从业者的能力从对框架vue、react的要求，逐步扩展到2D、3D空间的交互，为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅，从实战项目入门，挖掘Cesium.js API，并逐步丰富项目。

目录

 一、WebGIS简介

CesiumJS简介

 CesiumJS源代码

 二、项目快速搭建

 使用vite快速搭建vue3+typeScript

 安装Cesium插件

配置vite.config.js

清空style.css

在App.vue里面进行全局导入

运行程序

三、认识Cesium四大类

查看器类Viewer

场景类Scene

实体类​编辑Entity

数据源集合类DataSourceCollection

四、Cesium的坐标与转换

 1.WGS84经纬度坐标系-没有实际的对象

 2.WGS84弧度坐标系（Cartographic）

构造函数法

静态函数法

3.笛卡尔空间直角坐标系(Cartesian3)*重要

4.平面坐标系(Cartesian2)

5.4D笛卡尔坐标系(Cartesian4)-用的较少

坐标系相互转换

WGS84转笛卡尔空间直角坐标系

 笛卡尔空间直角坐标系转WGS84

平面坐标系转场景WGS84坐标

屏幕坐标转地表坐标

 屏幕坐标转椭球面坐标

 五、重要Cesium相机系统

 1.setView方法

 2.flyTo方法

3. lookAt方法

 4.viewBoundingSphere方法

 六、Cesium地图和地形加载

注册Cesium Ion

加载公路地图数据

 加载地形数据

 添加建筑体

 七、Cesium空间数据加载

几何体——点加载

几何体——线加载

 几何体——面加载

 几何体——3D模型加载

 文字——标签加载

 八、Cesium空间数据管理

添加我的博客立牌

entity增删改