Skip to main content

实战:监测预报系统

使用免费的气象数据构建一个包含站点实况、卫星云图、GFS预报、实时航线等功能的交互系统

开始之前:系统分析和设计

开始之前 本项目默认您使用的是云平台或者Webpack打包方式(如有疑问请参考使用webpack脚手架快速开始或者在现有webpack项目中引入QE)。 本实战内容将涵盖QE引擎的诸多功能特性,...

第一节:初始化地图,渲染页面组件

云平台和本地开发的区别 如果您是尝试QE功能,建议您直接在云平台开始根据教程来编码,要注意的是需要在您自己的空间里面创建新项目并保存,否则页面刷新后您的代码将会丢失。 您也可以参考快速入门中的方...

第二节:创建图层菜单,定义图层管理器

上一节完成后,我们已经创建了地图,根组件,并且在根组件中渲染了测试的图层菜单以及工具按钮,这一节我们将创建一个完整的图层菜单,并且对如何创建、删除图层做一些思考,最终设计一个用于管理这个项目图...

第三节:实现图层管理器逻辑

在上一节中,我们已经实现了按钮的取消和选中,并且与创建和删除图层做了绑定,这一节,我们来实现图层管理器的通用逻辑。 图层缓存 既然我们要能够删除图层,说明我们已经将图层缓存起来,当然Map本...

第四节:气象实时数据加载

前几节一直在做铺垫,到此终于开始写数据加载和渲染了。一定有迫不及待的小伙伴直接从这一章节开始看,但是我们强烈建议您每一节都看一下,尤其是没有太多开发经验的同学。 实现Metar观测数据的显示...

第五节:气象预报数据加载

这一节我们主要加载GFS预报数据,数据源来自ucar的在线OPeNDAP服务。 获取GFS数据 一个正常系统一般数据来源于后端的业务接口,本系统本着尽可能利用外部接口,重点演示QE系统使用的...

第六节:实时航班及航班详情显示

前几节我们介绍了如何加载气象的实况和预报数据,本节我们将实现实时航班信息的显示,核心也是渲染矢量数据,但加入了定时刷新的功能。 添加相关菜单和业务逻辑 之前我们并没有在图层菜单上添加航班相关...

第七节:交互工具管理器设计和实现

对于地图上直接的数据展示,我们已经都完成了,现在要做的就是交互工具的开发。 UI支持配置的交互工具 在第一节中,我们放入了占位的工具栏UI组件,实际上对于简单的工具,我们完全可以直接在UI中...

第八节:使用自定义地图工具实现任意点预报

有了上一节的铺垫,我们这一节开始实现任意点预报功能。 功能分析 任意点预报的流程较为清晰: 如果我们直接在切换地图工具的方法里面编写这个逻辑,那么后续其他地图工具的逻辑就会都在一起,这样代...

第九节:绘制和测距工具接入

上一节中我们实现了自定义地图工具来做任意点预报,这一节我们将直接使用QE内置的地图工具,所以会更简单一些! 添加区域绘制功能 在本示例中,我们计划添加的是区域绘制功能,这是一个纯粹为了演示而...

第十节:总结

免责声明 本站点使用的数据仅供演示QuickEarth使用,请勿做实际生产用途,否则由此产生的后果均自行负责。 Metar报文来自 https://www.aviationwe...