一种基于页面组件的在线飞行剖面图绘制工具研究

沈毅超

（中国商飞上海航空工业（集团）有限公司，上海 200232）

飞行剖面图是为完成某一特定飞行任务而制定的飞机航迹图形，是一次飞行任务的重要依据，也是表达飞行任务的一种形式。现行主要的绘制飞行剖面图有采用专业软件绘制和采用WPS表格绘制两种方法。第一种为采用专业软件绘制，一般该类专业软件功能强大，缺点是价格昂贵，而且为单机版，无法在任意地点使用，因为账号的限制，也无法同时供所有人使用，不利于大规模推广使用。第二种方法为采用WPS表格绘制，该方法价格低廉，也易于共享，但是绘制难度较大，绘制者需要掌握相当熟练的WPS表格技巧才能绘制出满足需要的剖面图。以上两种方案各有利弊，因此本文介绍了一种新的设计思路，尝试采用目前业界主流的页面组件的组合，经过模块划分、模块选型、系统集成的过程，提供一种B/S架构的飞行剖面图绘制工具，这样的方案可以既保留方案二WPS表格的便捷性，通过一定的快速定制，获取方案一的绘制效果。通过本设计方案，信息化设计开发人员可利用互联网上可以找到的页面组件的各项特性，快速定制出需要的剖面图绘制工具，简化工具使用，帮助绘制人员制作出满足需要的同时且美观的飞行剖面图，同时由于其B/S架构的特性，该工具无须安装，只要通过访问系统服务即可进行使用，同时如果接入服务器进行存储，则还可以提供额外的令所有人都能数据共享的协同性，方便绘制人员异地办公、远程办公。

1.模块划分和设计

在模块划分阶段，应当首先从实际的飞行剖面图绘制场景出发，分析出需要的模块和部件。本次模块划分采用Design Thinking的方法论，站在绘制人员的角度看问题，找到绘制剖面图的必须功能和痛点功能，并设计出原型图。在同飞行剖面绘制人员的需求调研中，笔者了解到以下诉求：希望绘制简单，能根据一些表格数据快速绘制出想要的飞行剖面图；要能支持多条标线的绘制；几个绘制人员在一起讨论时，希望能直接在剖面图上做快速的动态调整；希望要能输出需要的图片格式的飞行剖面图；希望有双重坐标系，既支持公制高度，也支持英制高度。根据以上的需求和痛点，笔者总结出表格填写和制图两大模块以及两大模块中对应的功能需求。

1.1 表格填写

表格填写模块应该具备类似WPS表格的初级功能，用户可任意增减需要的行数，用于填写序号、海拔、飞行内容、时间线，是否需要标线等必要的信息，同时为减轻绘制人员的工作量，该组件应当支持批量数据导入，数据从WPS表格或散点图甚至是一些IT系统中获取后，能经过一定简易的格式转换后导入该表格组件。在完成表格编制后，应该具备功能，支持这些表格数据以一定的通用形式从表格中导出。

1.2 制图

制图组件应该能根据表格数据生成必要的折线图、散点图等，也要支持标线、双纵轴、标题、坐标等多种辅助元素的调节。同时为方便剖面图的绘制，最好能支持用户直接对图中每个点做拖曳调整，以尽快画出需要的飞行剖面示意图。另外为方便下次使用，此散点图应该能支持当前所有点的导出功能，用以保存。在实现散点图后，应该支持多种格式（比如JPG、PNG等）的导出，方便用户导出后的使用。因此根据上述需求，做了相应的模块划分，最基本功能应当包含表格编制和图像绘制两方面功能。笔者根据上述需求和模块划分，制作了简单的原型图，力求在一个屏幕中展示必要的所有数据和飞行剖面图，示例图如图1所示：

图1 在线飞行剖面图绘制软件示意图

同时出于技术上的考虑，两类组件应当支持主流的JSON格式数据，以便于集成、数据交互、导入导出、扩展等功能。

2.页面组件选型

在完成模块的规划以及原型界面绘制后，需要开展对制表和制图模块两类页面组件的技术选型工作，随着互联网技术的不断发展和普及，涌现出大量优秀的基于JavaScript语言的网页控件，制表和制图两类组件的需求是当今社会比较普遍的需求，因此有大量可用页面组件以供选择，因此要通过多种维度，考察这些组件，根据自身需要，对这些组件进行打分，最后选择出合理、合适的页面控件来满足设计要求。

2.1 表格类组件

表格类组件在业界比较有名的有SpreadJS[1]、HandsonTable[2]，由于表格类组件实际需求较为简单，还可以采用自研的表格，本文不再赘述。SpreadJS控件的界面类似早期的OFFICE EXCEL 2007样式，支持表格的复制粘贴，让用户可快速适应并使用。HandsonTable是一款UX类似WPS表格sheet表的插件，同样类似EXCEL样式，用户可以快速适应并使用。通过对API丰富性、编程难易度、界面美观度、组件维护情况、数据格式通用性、文档完备性、是否支持数据导出、浏览器兼容性等几个方面，对以上组件进行了比对，结果可见表1：

表1 表格类组件多维度评价表

2.2 制图类组件

制图类组件在业界比较有名的有Highcharts[3]、Echarts[4]等。通过对API丰富性、编程难易度、界面美观度、组件维护情况、数据格式通用性、文档完备性、是否支持图片导出等几个方面，对以上组件进行了比对，结果可见表2：

表2 制图类组件多维度评价表

两类组件的候选组件均非常优秀，能满足本研究的要求，最终根据各方面的综合结果，笔者择优选择了相应的组件作为本次研究的基础组件。

3.实现、集成和存储

两种组件均提供了JavaScript的完整部署包，因此仅需下载后部署在Tomcat上即可进行启动运行。本次设计采用主流的JSON格式进行数据交换，一旦获取到初始化的数据，可以在页面完成制表到绘图再到打印图片的全过程，无须再至后台进行数据交互，大大减少了开发的工作量。表格组件和制图组件均提供了丰富的接口API，必要的比如获取数据、输入数据、加载数据等都均有较为详细的说明，研究人员可根据样例快速入门，并根据文档集中精力对表格和绘制剖面图进行业务上必要的研究和尝试。特别需要说明的是，在本文实际研究过程中，两种组件提供的字段和JSON内部的格式并不完全一致，因此仍需要做一次必要数据转换，将同为JSON格式的表格数据映射到绘图输入数据即可，反之亦然。经过几次调试，最终完成了表格-绘图和绘图-表格两类主要操作的系统集成，同时制图组件自带了当前已绘制图形的图片导出功能，因此直接实现了飞行剖面图的导出功能。

4.结语

本文研究了一种基于表格-图像的在线飞行剖面图设计工具，在模块划分阶段获取到了表格和绘图两种页面组件需求，随后开展对软件组件的比对选型并最终确定了组件，最后开展系统的集成、调试、定制，将预定的设计实现。该研究基于组件强大的API和灵活性，可以根据需要做快速调整，满足实际的需要。本文仅作为一种研究，探索剖面图在线绘制的可行性。事实上现阶段人们对根据数据输出美观的可视化图片的需要正不断加大，有较为广阔的前景。其他研究人员可以以此作为扩展，后续类似用户自定义表格-特定数据展示类的需求，都可沿用这样的思路开展研究和设计，即利用一些页面组件，根据用户的需求快速定制表格，输出他们需要的各种图像，以满足不同用户的各类数据展示需要，以此减少专业软件的使用，有效降低使用的成本。