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

开始之前

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

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

• TypeScript基本语法
• 实战-矢量和栅格数据渲染 中的基本功能

需求分析

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

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

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

系统设计

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

后端接口

前端页面

开发语言

本示例我们使用TypeScript开发。

开发框架

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

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

模块分解

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

• 图层相关模块（实况、预报、航班）
• 地图工具模块（任意点预报、绘制、测距）

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

实际应用

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