Vue3 + Cesium + Typescript 集成搭建的快速启动模板(包含示例数据)
开门见山
项目地址:https://github.com/tanghaojie/vue3-cesium-typescript-start-up-template
- 好用的话给个star呗,有更新可以第一时间看见
简介
本项目是一个整合了 Vue3 + Cesium + Typescript 的启动模板,同时还包含了各种不同类型的示例数据。在线预览地址: https://vue3-cesium-typescript-start-up-template.vercel.app/(可能需要跨过[墙]才能访问)
用法说明
注意:需要先安装Node.js环境
点击 Fork 到把项目拷贝到你自己的仓库,或者直接git clone
本仓库,然后:
npm install
开发环境编译和热重载
npm run serve
生产环境编译和压缩
npm run build
相关依赖
- Vue3
- cesium
- typescript
- 可选的
- Element plus 使用了部分组件以方便开发。
- tailwindcss 快速 UI 样式。
- ECharts
功能列表
- 视图切换
- 状态栏
- 环境控制
- 地球控制
- 3D tile 操作
- 绘图
- 测量
- 地形采样
- 等高线
- 设置
- 持续加入中...
指南
Cesium vue
Cesium 实例挂载在 vue 实例的全局属性上(vue3 支持多个 vue 实例,你可以自定义选择),然后就可以在 vue 实例中的任何地方拿到 cesium:
const { viewer, viewerContainer } = this.$cv // type CesiumVue
如果需要附件一些其他的属性,可以添加到CesiumVue
(src/libs/cesium/cesium-vue.ts) 上来扩展。
非响应式
为了更好的性能, cesium instance
cesium 实例是非响应式的!
和 Vue 中的 data 等不同,即使 Vue3 使用 proxy
代替 Object.defineProperty
获得了很大的性能提升,代理所有的 cesium 属性以实现响应式,还是会极大的丢失性能和降低 FPS。
如何取舍:
如果只需要使用 cesium 的基础功能,例如只做一些基础的可视化、简单交互、数据加载展示等等这些比较常规的操作,其实可以使用其他的一些用 vue 对 cesium 进行了封装的库,这样可以很大程度上提升项目的构建速度。唯一需要注意的问题是,所需的功能是否已经实现。
但如果你要深层的进入 cesium 内部,例如自定义 shader、高级空间分析、复杂的交互操作等等,把这些功能点和 vue 绑定就是一件不合算,也不合理的事情了。
另一种情况,当项目很庞大,需要用到 cesium 各个模块时,随着用 vue 封装 cesium 的组件越来越多以后,你会发现,其本质上又回到了代理整个 cesium 实例来实现响应式的模式,这个时候,性能又是不得不考虑的问题。
示例数据
- Tiled satellite data
- Tiled terrain data
- 3D tile buildings
- 3D tile point cloud collected with ipad pro lidar
以上数据都是本人通过公开渠道获取或者自己采集后,制作的示例数据。如果用于测试可以直接使用,如果用于商业用途请联系告知。谢谢。
截图
后续计划
- Options API -> Composition API
- Dark mode
- Timeline and time data
- More sample data
- i18n
注意: 不要使用 1.81.0 - 1.82.1 版本的 cesium, 它包含一个已知的bug.
Vue3 + Cesium + Typescript 集成搭建的快速启动模板(包含示例数据)的更多相关文章
- 番外篇--Moddule Zero启动模板
1.3 ABPZero - 启动模板 1.3.1 简介 使用ABP和moudle-zero开始一个新项目的最简单的方式是在模板页创建模板.记住要勾选 Include module zero. 在创建并 ...
- Module-Zero之启动模板
返回<Module Zero学习目录> 概览介绍 社交登录 基于Token的认证 单元测试 概览介绍 使用ABP和Module-Zero开始一个新的项目最简单的方式通过ABP官网的模板页面 ...
- 《Vue3.x+TypeScript实践指南》已出版
转眼回长沙快2年了,图书本在去年就已经完稿,因为疫情,一直耽搁了,直到这个月才出版!疫情之下,众生皆苦!感觉每天都是吃饭.睡觉.上班.做核酸! 图书介绍 为了紧跟技术潮流,该书聚焦于当下火的Vue3和 ...
- 01 基于umi搭建React快速开发框架
介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会 ...
- Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...
- 使用Yeoman快速启动AngularJS项目开发
本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...
- 神逸之作:国产快速启动软件神品ALTRun
http://xbeta.info/altrun.htm 作者: ET民工和塞壬 日期: 2010-09-15 分类: windows 标签: quick-launch <神逸之作:国产快速启动 ...
- 键盘快速启动工具Launchy的简单使用技巧
打开电脑面对林林总总的图标,找到对应的程序,快速启动显得尤为重要.这样有利于提高我们的效率. 好了,直接上图: 就是这款小巧的工具,界面如上. 接下来介绍这款工具的使用技巧. 1.安装成功后:打开工具 ...
- 【原】无脑操作:TypeScript环境搭建
概述:本文描述TypeScript环境搭建,以及基于VSCode的自动编译设置和调试设置.网络上很多相应文章的方式过时了或者无法试验成功. ------------------------------ ...
随机推荐
- 使用Mybatis插件 PageHelper 模拟百度分页(Day_20)
生活中,要学会沉淀生命,沉淀心情,沉淀自己 模拟百度分页最终实现效果如图: 本篇博客运行环境 JDK8 + IntelliJ IDEA 2018.3 + Tomcat 8.5.31 准备好了我们就开始 ...
- 女朋友看了也懂的Kafka(上篇)
@ 目录 前言:为什么需要Kafka 1.初识kafka 1.1 消息队列的好处: 1.2 消息队列的两种模式 没有消息队列我们怎么做? 传统MQ怎么做? 这时候,Kafka就"闪亮登场&q ...
- LATEX如何写多个条件推导式推出一个结论
用markdown写推导式的时候,不太好写,故做个笔记记录一下,插入 公式块 : \left. \begin{aligned} \left. \begin{aligned} \text{这里可以写文字 ...
- VTA:深度学习加速器堆栈
VTA:深度学习加速器堆栈 多功能Tensor加速器(VTA)是一个开放的,通用的,可定制的深度学习加速器,具有完整的基于TVM的编译器堆栈.设计VTA来展示主流深度学习加速器的最显着和共同的特征.T ...
- Thumb扩展
Thumb扩展 ARM处理器已在嵌入式系统,手持计算机和其系统中得到了最大的应用,在这些系统中,系统对使用有限资源进行大量工作的要求很高.Thumb扩展是为解决资源消耗中的某些方面而创建的,已成为当今 ...
- eclipse解决中文乱码
参考链接:https://blog.csdn.net/lzc2644481789/article/details/97244261
- 教你三种jQuery框架实现元素显示及隐藏动画方式
摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...
- sql优化_隐式-显示转换
======== 测试表1信息 =======SQL> select count(*) from tb_test; COUNT(*)---------- 3000000 SQL&g ...
- RabbitMQ由浅入深入门全总结(二)
写在最前面 距离上一次发文章已经很久了,其实这段时间一直也没有停笔,只不过在忙着找工作还有学校结课的事情,重新弄了一下博客,后面也会陆陆续续会把文章最近更新出来~ 这篇文章有点长,就分了两篇 PS:那 ...
- 关于spooling的一些理解
spooling做了什么 1.将独占设备(打印机)虚拟化,变成一个逻辑上的共享设备. 怎么理解?虚拟化,通俗来讲,就是让单个资源仿似变成了多个资源. 以打印机为例,没有虚拟化之前,只能有一个进程申请到 ...