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

本项目默认您使用的是云平台或者Webpack打包方式（如有疑问请参考使用webpack脚手架快速开始或者在现有webpack项目中引入QE）。

本实战内容将涵盖QE引擎的诸多功能特性，但是在开始之前，您需要掌握以下知识：

本系统仅供熟悉QE开发框架使用，请勿作为真实业务参考系统，否则您将对由此产生的任何后果负责。

本系统以机场气象用户作为假定使用对象，对其可能需要的数据进行可视化呈现，并提供一系列交互分析功能，以下为本系统的基本功能结构：

可以看到，我们的实战系统功能颇为丰富，包括了四个模块，十个子模块。这些功能较为容易理解，不再一一罗列，让我们赶快进入正题！

由于是个示例系统，我们仅对核心需求进行简单设计

在本例中，我们采用薅羊毛的方式进行开发，所有的数据均使用互联网上找到的免费数据接口，因此我们主要的关注点可以放到前端系统的开发，这也体现了QE灵活的数据对接能力。

本示例我们使用TypeScript开发。

本示例我们使用React+AntD作为组件和UI框架。

由于本系统主要演示功能使用，为了简化逻辑，我们只使用最新数据，不更多的考虑数据的状态。

出于演示目的，我们只使用一个大的组件负责整个界面的渲染，其中包括两个主要的部分：

由于在云平台中我们使用单文件开发模式，地图和图例容器的初始化直接在组件外部进行，这样可以避免受到处理组件之间依赖关系的干扰。

我们开发了一个功能较为完整的演示系统，您可以点击访问 https://serv.91weather.com