写在前面:随着市场对数字孪生的需求日益增多,对于前端从业者的能力从对框架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空间数据管理
添加我的博客立牌文章来源:https://www.toymoban.com/news/detail-856864.html
entity增删改文章来源地址https://www.toymoban.com/news/detail-856864.html
到了这里,关于迈向三维:vue3+Cesium.js三维WebGIS项目实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!