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

这篇具有很好参考价值的文章主要介绍了迈向三维: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增删改文章来源地址https://www.toymoban.com/news/detail-856864.html

到了这里,关于迈向三维:vue3+Cesium.js三维WebGIS项目实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Vue3+TS+Vite+Cesium创建项目

    随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS如今真的越来越火了,对于做GIS前端开发的人员来说,Cesium开发是绝对绕不开的一门技术,所以今天来说说如何利用当下最火的 Vue3+TS+Vite 来搭建一个基于Cesium的项目开发环境。 1.使用 yarn create vite 创建

    2024年02月05日
    浏览(74)
  • 使用vite创建vue3的Cesium基础项目

    使用vite创建vue3项目:可以参考官方文档Vite官方中文文档 1.1 在指定文件夹路径下使用npm(前提是已经安装好了node): 1.2 cd到创建的项目文件夹: 安装并使用Cesium; 2.1 找到插件:vue插件, 找到社区插件, ctrl+F搜索“Cesium”,找到Cesium的插件使用教程:Cesium插件 就能找到C

    2024年02月13日
    浏览(55)
  • vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目

    目录 系列文章目录 前言 一、搭建项目 1.检查node版本号 2.搭建vue3项目 二、配置cesium 1.前期准备 2.安装cesium 3.引入cesium 4.初始化页面 总结   这几年智慧城市、数字孪生、数字可视化这些高级词汇可太多啦,招聘简介上也有很多要求会webGis等相关经验,所以我觉得最近来学一

    2024年02月07日
    浏览(68)
  • 在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

    用到的区域文件、地图标记文件、路径信息文件、模型文件 提取码:99jq 使用vite创建vue3项目 cd到创建的项目文件夹中 安装Cesium 配置 vite.config.js文件:添加Cesium并设置反向代理实现跨域。 style.css(可选):修改#app样式 代码 App.vue 解读 加载token 创建查看器viewer,加载世界街道地

    2024年02月16日
    浏览(45)
  • Cesium引入vite + vue3

    卸载命令 使用 vite.config.js 组件使用 加载高德地图 高德地图的加载方便很多,并不需要申请key,可以直接加载到我们的Cesium中。 加载ArcGISMap地图

    2024年02月14日
    浏览(36)
  • vite+vue3+cesium环境搭建

    1.创建一个Vite项目 npm create vite@latest 2.安装cesium插件:vite-plugin-cesium npm i cesium vite-plugin-cesium vite -D 3、配置vite.config.js import cesium from \\\'vite-plugin-cesium\\\'; export default defineConfig({ plugins: [vue(),cesium()] }) 4、清空style.css中的样式 5、配置App.vue 清空一切不需要的,设置样式使得全屏 6、配

    2024年02月09日
    浏览(36)
  • vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)

    加载三维模型 视频参考地址: https://www.bilibili.com/video/BV14g411s7DX/?spm_id_from=333.1007.top_right_bar_window_history.content.clickvd_source=4716b12357fe8e4b33b293b4bbbbfcd8

    2024年01月23日
    浏览(45)
  • Vue3+Vite 初始化Cesium

    git

    2024年02月11日
    浏览(37)
  • 【WebGIS实例】(10)Cesium开场效果(场景、相机旋转,自定义图片底图)

    漫游效果视频: 【WebGIS实例】(10)Cesium开场效果(场景、相机 点击鼠标后将停止旋转并正常加载影像底图: 可以直接看代码,注释写得应该比较清楚了: 调用: 刚进入时就是直接加载这种图片作为SingleTileImageryProvider的,因为这样能够很快得加载出完整效果,而且不会像

    2024年02月12日
    浏览(39)
  • Mars3D/Cesium + VUE3

    不定期更新 参考官网: http://mars3d.cn/dev/guide/start/import.html#_3-3-vite-%E6%8A%80%E6%9C%AF%E6%A0%88%E6%97%B6-%E7%9A%84%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9 :已亲测vite框架,可以运行,具体见下main 1、插件 vite-plugin-mars3d vite中需要

    2024年02月14日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包