开门见山

项目地址: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

相关依赖

功能列表

  • 视图切换
  • 状态栏
  • 环境控制
  • 地球控制
  • 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 instancecesium 实例是非响应式的!

和 Vue 中的 data 等不同,即使 Vue3 使用 proxy 代替 Object.defineProperty 获得了很大的性能提升,代理所有的 cesium 属性以实现响应式,还是会极大的丢失性能和降低 FPS。

如何取舍:

  • 如果只需要使用 cesium 的基础功能,例如只做一些基础的可视化、简单交互、数据加载展示等等这些比较常规的操作,其实可以使用其他的一些用 vue 对 cesium 进行了封装的库,这样可以很大程度上提升项目的构建速度。唯一需要注意的问题是,所需的功能是否已经实现。

  • 但如果你要深层的进入 cesium 内部,例如自定义 shader、高级空间分析、复杂的交互操作等等,把这些功能点和 vue 绑定就是一件不合算,也不合理的事情了。

  • 另一种情况,当项目很庞大,需要用到 cesium 各个模块时,随着用 vue 封装 cesium 的组件越来越多以后,你会发现,其本质上又回到了代理整个 cesium 实例来实现响应式的模式,这个时候,性能又是不得不考虑的问题。

示例数据

以上数据都是本人通过公开渠道获取或者自己采集后,制作的示例数据。如果用于测试可以直接使用,如果用于商业用途请联系告知。谢谢。

截图

后续计划

  • 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 集成搭建的快速启动模板(包含示例数据)的更多相关文章

  1. 番外篇--Moddule Zero启动模板

    1.3 ABPZero - 启动模板 1.3.1 简介 使用ABP和moudle-zero开始一个新项目的最简单的方式是在模板页创建模板.记住要勾选 Include module zero. 在创建并 ...

  2. Module-Zero之启动模板

    返回<Module Zero学习目录> 概览介绍 社交登录 基于Token的认证 单元测试 概览介绍 使用ABP和Module-Zero开始一个新的项目最简单的方式通过ABP官网的模板页面 ...

  3. 《Vue3.x+TypeScript实践指南》已出版

    转眼回长沙快2年了,图书本在去年就已经完稿,因为疫情,一直耽搁了,直到这个月才出版!疫情之下,众生皆苦!感觉每天都是吃饭.睡觉.上班.做核酸! 图书介绍 为了紧跟技术潮流,该书聚焦于当下火的Vue3和 ...

  4. 01 基于umi搭建React快速开发框架

    介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会 ...

  5. Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目

    最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...

  6. 使用Yeoman快速启动AngularJS项目开发

    本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...

  7. 神逸之作:国产快速启动软件神品ALTRun

    http://xbeta.info/altrun.htm 作者: ET民工和塞壬 日期: 2010-09-15 分类: windows 标签: quick-launch <神逸之作:国产快速启动 ...

  8. 键盘快速启动工具Launchy的简单使用技巧

    打开电脑面对林林总总的图标,找到对应的程序,快速启动显得尤为重要.这样有利于提高我们的效率. 好了,直接上图: 就是这款小巧的工具,界面如上. 接下来介绍这款工具的使用技巧. 1.安装成功后:打开工具 ...

  9. 【原】无脑操作:TypeScript环境搭建

    概述:本文描述TypeScript环境搭建,以及基于VSCode的自动编译设置和调试设置.网络上很多相应文章的方式过时了或者无法试验成功. ------------------------------ ...

随机推荐

  1. 使用Mybatis插件 PageHelper 模拟百度分页(Day_20)

    生活中,要学会沉淀生命,沉淀心情,沉淀自己 模拟百度分页最终实现效果如图: 本篇博客运行环境 JDK8 + IntelliJ IDEA 2018.3 + Tomcat 8.5.31 准备好了我们就开始 ...

  2. 女朋友看了也懂的Kafka(上篇)

    @ 目录 前言:为什么需要Kafka 1.初识kafka 1.1 消息队列的好处: 1.2 消息队列的两种模式 没有消息队列我们怎么做? 传统MQ怎么做? 这时候,Kafka就"闪亮登场&q ...

  3. LATEX如何写多个条件推导式推出一个结论

    用markdown写推导式的时候,不太好写,故做个笔记记录一下,插入 公式块 : \left. \begin{aligned} \left. \begin{aligned} \text{这里可以写文字 ...

  4. VTA:深度学习加速器堆栈

    VTA:深度学习加速器堆栈 多功能Tensor加速器(VTA)是一个开放的,通用的,可定制的深度学习加速器,具有完整的基于TVM的编译器堆栈.设计VTA来展示主流深度学习加速器的最显着和共同的特征.T ...

  5. Thumb扩展

    Thumb扩展 ARM处理器已在嵌入式系统,手持计算机和其系统中得到了最大的应用,在这些系统中,系统对使用有限资源进行大量工作的要求很高.Thumb扩展是为解决资源消耗中的某些方面而创建的,已成为当今 ...

  6. eclipse解决中文乱码

    参考链接:https://blog.csdn.net/lzc2644481789/article/details/97244261

  7. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  8. sql优化_隐式-显示转换

    ========  测试表1信息   =======SQL> select count(*) from tb_test; COUNT(*)----------   3000000   SQL&g ...

  9. RabbitMQ由浅入深入门全总结(二)

    写在最前面 距离上一次发文章已经很久了,其实这段时间一直也没有停笔,只不过在忙着找工作还有学校结课的事情,重新弄了一下博客,后面也会陆陆续续会把文章最近更新出来~ 这篇文章有点长,就分了两篇 PS:那 ...

  10. 关于spooling的一些理解

    spooling做了什么 1.将独占设备(打印机)虚拟化,变成一个逻辑上的共享设备. 怎么理解?虚拟化,通俗来讲,就是让单个资源仿似变成了多个资源. 以打印机为例,没有虚拟化之前,只能有一个进程申请到 ...