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

沈毅超

（中國商飛上海航空工業（集團）有限公司，上海 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和靈活性，可以根據需要做快速調整，滿足實際的需要。本文僅作為一種研究，探索剖面圖在線繪制的可行性。事實上現階段人們對根據數據輸出美觀的可視化圖片的需要正不斷加大，有較為廣闊的前景。其他研究人員可以以此作為擴展，后續類似用戶自定義表格-特定數據展示類的需求，都可沿用這樣的思路開展研究和設計，即利用一些頁面組件，根據用戶的需求快速定制表格，輸出他們需要的各種圖像，以滿足不同用戶的各類數據展示需要，以此減少專業軟件的使用，有效降低使用的成本。