一種基于頁面組件的在線飛行剖面圖繪制工具研究

沈毅超

（中國商飛上海航空工業(yè)（集團）有限公司，上海 200232）

飛行剖面圖是為完成某一特定飛行任務(wù)而制定的飛機航跡圖形，是一次飛行任務(wù)的重要依據(jù)，也是表達飛行任務(wù)的一種形式?，F(xiàn)行主要的繪制飛行剖面圖有采用專業(yè)軟件繪制和采用WPS表格繪制兩種方法。第一種為采用專業(yè)軟件繪制，一般該類專業(yè)軟件功能強大，缺點是價格昂貴，而且為單機版，無法在任意地點使用，因為賬號的限制，也無法同時供所有人使用，不利于大規(guī)模推廣使用。第二種方法為采用WPS表格繪制，該方法價格低廉，也易于共享，但是繪制難度較大，繪制者需要掌握相當(dāng)熟練的WPS表格技巧才能繪制出滿足需要的剖面圖。以上兩種方案各有利弊，因此本文介紹了一種新的設(shè)計思路，嘗試采用目前業(yè)界主流的頁面組件的組合，經(jīng)過模塊劃分、模塊選型、系統(tǒng)集成的過程，提供一種B/S架構(gòu)的飛行剖面圖繪制工具，這樣的方案可以既保留方案二WPS表格的便捷性，通過一定的快速定制，獲取方案一的繪制效果。通過本設(shè)計方案，信息化設(shè)計開發(fā)人員可利用互聯(lián)網(wǎng)上可以找到的頁面組件的各項特性，快速定制出需要的剖面圖繪制工具，簡化工具使用，幫助繪制人員制作出滿足需要的同時且美觀的飛行剖面圖，同時由于其B/S架構(gòu)的特性，該工具無須安裝，只要通過訪問系統(tǒng)服務(wù)即可進行使用，同時如果接入服務(wù)器進行存儲，則還可以提供額外的令所有人都能數(shù)據(jù)共享的協(xié)同性，方便繪制人員異地辦公、遠(yuǎn)程辦公。

1.模塊劃分和設(shè)計

在模塊劃分階段，應(yīng)當(dāng)首先從實際的飛行剖面圖繪制場景出發(fā)，分析出需要的模塊和部件。本次模塊劃分采用Design Thinking的方法論，站在繪制人員的角度看問題，找到繪制剖面圖的必須功能和痛點功能，并設(shè)計出原型圖。在同飛行剖面繪制人員的需求調(diào)研中，筆者了解到以下訴求：希望繪制簡單，能根據(jù)一些表格數(shù)據(jù)快速繪制出想要的飛行剖面圖；要能支持多條標(biāo)線的繪制；幾個繪制人員在一起討論時，希望能直接在剖面圖上做快速的動態(tài)調(diào)整；希望要能輸出需要的圖片格式的飛行剖面圖；希望有雙重坐標(biāo)系，既支持公制高度，也支持英制高度。根據(jù)以上的需求和痛點，筆者總結(jié)出表格填寫和制圖兩大模塊以及兩大模塊中對應(yīng)的功能需求。

1.1 表格填寫

表格填寫模塊應(yīng)該具備類似WPS表格的初級功能，用戶可任意增減需要的行數(shù)，用于填寫序號、海拔、飛行內(nèi)容、時間線，是否需要標(biāo)線等必要的信息，同時為減輕繪制人員的工作量，該組件應(yīng)當(dāng)支持批量數(shù)據(jù)導(dǎo)入，數(shù)據(jù)從WPS表格或散點圖甚至是一些IT系統(tǒng)中獲取后，能經(jīng)過一定簡易的格式轉(zhuǎn)換后導(dǎo)入該表格組件。在完成表格編制后，應(yīng)該具備功能，支持這些表格數(shù)據(jù)以一定的通用形式從表格中導(dǎo)出。

1.2 制圖

制圖組件應(yīng)該能根據(jù)表格數(shù)據(jù)生成必要的折線圖、散點圖等，也要支持標(biāo)線、雙縱軸、標(biāo)題、坐標(biāo)等多種輔助元素的調(diào)節(jié)。同時為方便剖面圖的繪制，最好能支持用戶直接對圖中每個點做拖曳調(diào)整，以盡快畫出需要的飛行剖面示意圖。另外為方便下次使用，此散點圖應(yīng)該能支持當(dāng)前所有點的導(dǎo)出功能，用以保存。在實現(xiàn)散點圖后，應(yīng)該支持多種格式（比如JPG、PNG等）的導(dǎo)出，方便用戶導(dǎo)出后的使用。因此根據(jù)上述需求，做了相應(yīng)的模塊劃分，最基本功能應(yīng)當(dāng)包含表格編制和圖像繪制兩方面功能。筆者根據(jù)上述需求和模塊劃分，制作了簡單的原型圖，力求在一個屏幕中展示必要的所有數(shù)據(jù)和飛行剖面圖，示例圖如圖1所示：

圖1 在線飛行剖面圖繪制軟件示意圖

同時出于技術(shù)上的考慮，兩類組件應(yīng)當(dāng)支持主流的JSON格式數(shù)據(jù)，以便于集成、數(shù)據(jù)交互、導(dǎo)入導(dǎo)出、擴展等功能。

2.頁面組件選型

在完成模塊的規(guī)劃以及原型界面繪制后，需要開展對制表和制圖模塊兩類頁面組件的技術(shù)選型工作，隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和普及，涌現(xiàn)出大量優(yōu)秀的基于JavaScript語言的網(wǎng)頁控件，制表和制圖兩類組件的需求是當(dāng)今社會比較普遍的需求，因此有大量可用頁面組件以供選擇，因此要通過多種維度，考察這些組件，根據(jù)自身需要，對這些組件進行打分，最后選擇出合理、合適的頁面控件來滿足設(shè)計要求。

2.1 表格類組件

表格類組件在業(yè)界比較有名的有SpreadJS[1]、HandsonTable[2]，由于表格類組件實際需求較為簡單，還可以采用自研的表格，本文不再贅述。SpreadJS控件的界面類似早期的OFFICE EXCEL 2007樣式，支持表格的復(fù)制粘貼，讓用戶可快速適應(yīng)并使用。HandsonTable是一款UX類似WPS表格sheet表的插件，同樣類似EXCEL樣式，用戶可以快速適應(yīng)并使用。通過對API豐富性、編程難易度、界面美觀度、組件維護情況、數(shù)據(jù)格式通用性、文檔完備性、是否支持?jǐn)?shù)據(jù)導(dǎo)出、瀏覽器兼容性等幾個方面，對以上組件進行了比對，結(jié)果可見表1：

表1 表格類組件多維度評價表

2.2 制圖類組件

制圖類組件在業(yè)界比較有名的有Highcharts[3]、Echarts[4]等。通過對API豐富性、編程難易度、界面美觀度、組件維護情況、數(shù)據(jù)格式通用性、文檔完備性、是否支持圖片導(dǎo)出等幾個方面，對以上組件進行了比對，結(jié)果可見表2：

表2 制圖類組件多維度評價表

兩類組件的候選組件均非常優(yōu)秀，能滿足本研究的要求，最終根據(jù)各方面的綜合結(jié)果，筆者擇優(yōu)選擇了相應(yīng)的組件作為本次研究的基礎(chǔ)組件。

3.實現(xiàn)、集成和存儲

兩種組件均提供了JavaScript的完整部署包，因此僅需下載后部署在Tomcat上即可進行啟動運行。本次設(shè)計采用主流的JSON格式進行數(shù)據(jù)交換，一旦獲取到初始化的數(shù)據(jù)，可以在頁面完成制表到繪圖再到打印圖片的全過程，無須再至后臺進行數(shù)據(jù)交互，大大減少了開發(fā)的工作量。表格組件和制圖組件均提供了豐富的接口API，必要的比如獲取數(shù)據(jù)、輸入數(shù)據(jù)、加載數(shù)據(jù)等都均有較為詳細(xì)的說明，研究人員可根據(jù)樣例快速入門，并根據(jù)文檔集中精力對表格和繪制剖面圖進行業(yè)務(wù)上必要的研究和嘗試。特別需要說明的是，在本文實際研究過程中，兩種組件提供的字段和JSON內(nèi)部的格式并不完全一致，因此仍需要做一次必要數(shù)據(jù)轉(zhuǎn)換，將同為JSON格式的表格數(shù)據(jù)映射到繪圖輸入數(shù)據(jù)即可，反之亦然。經(jīng)過幾次調(diào)試，最終完成了表格-繪圖和繪圖-表格兩類主要操作的系統(tǒng)集成，同時制圖組件自帶了當(dāng)前已繪制圖形的圖片導(dǎo)出功能，因此直接實現(xiàn)了飛行剖面圖的導(dǎo)出功能。

4.結(jié)語

本文研究了一種基于表格-圖像的在線飛行剖面圖設(shè)計工具，在模塊劃分階段獲取到了表格和繪圖兩種頁面組件需求，隨后開展對軟件組件的比對選型并最終確定了組件，最后開展系統(tǒng)的集成、調(diào)試、定制，將預(yù)定的設(shè)計實現(xiàn)。該研究基于組件強大的API和靈活性，可以根據(jù)需要做快速調(diào)整，滿足實際的需要。本文僅作為一種研究，探索剖面圖在線繪制的可行性。事實上現(xiàn)階段人們對根據(jù)數(shù)據(jù)輸出美觀的可視化圖片的需要正不斷加大，有較為廣闊的前景。其他研究人員可以以此作為擴展，后續(xù)類似用戶自定義表格-特定數(shù)據(jù)展示類的需求，都可沿用這樣的思路開展研究和設(shè)計，即利用一些頁面組件，根據(jù)用戶的需求快速定制表格，輸出他們需要的各種圖像，以滿足不同用戶的各類數(shù)據(jù)展示需要，以此減少專業(yè)軟件的使用，有效降低使用的成本。