基于SVG的電磁作戰概念可視化技術

蔣鳴遠 李曉 李復名

摘要：隨著電磁頻譜作戰概念涉及要素越來越多，且交互關系越來越復雜，概念的可視化技術作為作戰概念分析、演示和講解的關鍵技術之一，對先進的新型作戰概念研究越來越重要?；赟VG的電磁作戰概念可視化技術充分利用了SVG標簽內部動畫可定制性和Vue框架的屬性動態綁定機制，實現了10種具有作戰特色的基本的動畫元素，支持以配置的方式組合這些動畫元素以實現對作戰概念的可視化構建，對非專業編程人員較為友好。

關鍵詞：SVG；作戰概念；Vue；可視化

中圖分類號：TP311.5? ? ? 文獻標識碼：A

文章編號：1009-3044（2023）06-0064-02

開放科學（資源服務）標識碼（OSID）

0 引言

隨著電子信息科技的發展，電子戰正在走向電磁戰，電磁戰是一項自頂而下的體系工程，其不僅具有新的作戰樣式和作戰理念，同時對于武器裝備的能力增強具有頂層的牽引作用。在電子戰武器裝備發展論證中，首先需求開展先進的作戰概念的頂層設計，推動武器裝備體系結構設計優化，進而促進部隊戰斗力生成模式轉變，這也成為現代信息化武器裝備發展論證的重要途徑[1]。近年來，以美軍為首的軍事強國對電磁作戰能力越來越重視，其針對電磁域提出了電磁機動戰、電磁頻譜戰、多域戰[2]等各式各樣作戰概念，這些電磁頻譜作戰概念通常包含陸、海、空、天等各個作戰域內的作戰平臺，同時涉及雷達、通信、電子戰、導航等電磁行動且交互關系復雜，因此如何用友好的交互手段演示出復雜的作戰概念內涵及過程，是當前電磁作戰概念研究的重要組成部分。在過去，電子戰的作戰概念演示主要的手段是以靜態圖片結合幻燈片播放的方式，該方式在某種程度上能夠展示出作戰概念的過程，并且通過人工對于不同的素材進行靈活調整，但該方法的復用性較差，且幻燈片的動畫特效專業性較弱，不能有效反映出過程步驟背后的含義，交互效果不夠完美；另一種交互手段是視頻動畫制作的方式，該方式能夠有效的展示出電磁作戰概念的過程和內涵，交互效果也很突出，但是視頻動畫制作的技術門檻較高，不適用于從事電磁作戰概念研究的人員。本文提出一種基于SVG的作戰概念可視化技術，能夠在制作技術成本和可視化效果之間取得較好的平衡，一方面擁有諸多軍事領域內的專業動畫組件可以靈活復用，另一方面通過JSON配置文件的方式作為入參也極大降低了對二次開發人員的要求。

SVG（Scalable Vector Graphics，可伸縮矢量圖形）是W3C組織制定的二維圖形格式[3-4]，是基于XML的矢量圖形描述語言，能便捷地與Javascript和CSS進行交互[5]，在二次封裝時SVG圖像可以像HTML網頁一樣有很好的可讀性，在React、VUE這種數據驅動視圖的框架下，制作SVG動畫就變得更加靈活。

本文設計并實現一個基于SVG的電磁作戰概念可視化模塊，以JavaScript語言為開發語言，使用Vue框架編制以SVG圖形格式為基礎的組件，使之可以方便地應用在Web或桌面應用的平臺之中，實現了作戰案例分步驟、可伸縮的展示，目前已經開發了十種作戰案例展示中常見的動作，為用戶提供了更多角度、更為直觀和更加豐富的交互體驗，同時本文所設計可視化模塊考慮二次開發的需求，整合可視化的過程控制入參為一套簡單易學的基于JSON格式的配置規則，提升了模塊的復用性。

1 設計與實現

1.1 基本架構

本文所述的可視化模塊通過對配置文件的處理，快速在SVG標簽內生成出各種作戰概念動作子標簽，其架構如所示。在Javascript程序中，本文所述模塊將各類圖形動畫單獨封裝為VUE組件，并提供了各類圖形動畫的基本模板，用戶通過輸入不同的數據及配置文件靈活地進行繪圖和內容調整。SVG圖片的元素樣式采用CSS進行定義，動畫效果則通過SVG參數屬性進行動態控制。

1.2 實現方法

本文所述可視化模塊主要采用JavaScript語言進行開發，JavaScript是一種解釋型編程語言，其相關生態鏈被廣泛應用于WEB前端開發，JavaScript在人機交互領域的技術已經非常成熟。Vue框架是一套用于構建用戶界面的漸進式JavaScript框架，其核心庫只關注視圖層，易于學習，也容易與其他庫或已有項目整合，Vue通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue的基于模板開發的模式非常適合于SVG標簽的屬性綁定和參數傳遞，Vue的組件開發方式也適用于構建和擴展電磁作戰概念中基本的動畫元素，因此本文所述模塊選用JavaScript作為編程語言，Vue作為底層框架。

按照基本架構的設計，本文所述的可視化模塊的Vue模板結構如圖 2所示。

圖形生成模塊本文所述的可視化模塊的核心，包括了導彈發射動畫、作戰對象靜態展示、作戰對象直線勻速運動、作戰對象直線加速運動、作戰對象操場形巡邏移動、作戰對象圓形巡邏移動、地面固定目標動畫、爆炸動畫、通信鏈路、電磁波動畫共計10種子組件，每種子組件再通過v-if屬性進行顯隱控制，又通過v：bind的屬性傳遞機制獲取動畫的效果控制參數進行進一步操作。后續若有新的動畫類型則可以直接在圖形生成模塊中進行擴展。本文所述的可視化模塊會定義一塊給出長度和寬度的SVG畫布建立二維坐標軸，所有元素的繪制將以畫布的左上角為坐標軸原點，x軸向右正向增長，y軸向下正向增長，畫布示意如圖 3所示，模塊將會讀取配置文件中的相應資源設置為畫布背景。

2 技術特點

2.1 圖形功能多樣化

本文所述的電磁作戰概念可視化模塊的一大特點是能夠繪制具有一定軍事特色的圖形動畫，表1概括了目前已經集成的電磁作戰概念基本動畫素材，二次開發用戶在使用時只需要在配置文件中給出相應的動畫類型即可快速繪制出不同的動畫效果。

受形式所限，這里僅列出部分動畫的截圖效果，如圖 4、圖 5、圖 6所示，其中電磁波動畫是不斷有波束一層層向外擴散且由近到遠逐漸變淡，爆炸動畫也是從無到有的一團火焰效果，通信鏈路動畫是通過虛線的流動來展示通信鏈路的狀態和方向的：

2.2 二次開發能力

為進一步提升本可視化模塊的可用性，模塊的所有動畫效果控制均已封裝，通過傳入的JSON格式的配置文件進行控制，非專業編程人員也能夠通過修改

配置開發不同的作戰概念演示案例，這里本文給出一個簡單的示例對配置規則進行介紹：

{? type： 'equipage'，//動畫類型

name： '目標'，//圖像名稱

url：''，//圖像的base64URL

startAxis： [880， 380]，//開始出現的坐標

baseAttribute： {

width： 60，//圖像寬度

height： 57，//圖像高度

dur： 3//漸進動畫持續時間，單位秒

}，

// 電磁波動畫

waveTarget： {

waveTargetId： '4'， // 電磁波照射目標ID

// 發波目標地優先級高于waveTargetId

// targetAxis： [915.5，388.5]，

deg： 45， // 波束角度

beginSec： 7， // 開始發波時間，單位秒

dur： 3， // 波跑動所需時間，單位秒

count： -1， // 發波次數，-1表示無限次

color： '220，220，220'， // 波形顏色

// 波形動畫

effect： {

beginSec： 3， // 動畫開始時間，單位秒

type： 'smaller'， // 變化類型

deg： 45， // 變化后角度

distance： 60// 變化距離}

}

}

二次開發用戶可以根據想要的效果靈活調整上述配置，調整后的配置將作為輸入參數傳入可視化模塊中對動畫效果進行控制。

3 結束語

本文利用Vue前端框架在HTML中的SVG標簽內設計實現了一套電磁作戰概念動態可視化模塊，它以十種基本動畫素材為基礎，通過靈活的配置組合構建出不同的電磁作戰概念演示案例。所有的動畫素材都是基于JSON格式的配置進行效果控制，方便作戰概念研究人員上手和二次開發，動態可視化對于電磁作戰概念的分析、演示和講解有極大的幫助。此外，模塊在設計時充分考慮了擴展性，在未來的應用中將會加入更多類型的具有軍事特色的基本動作素材。

參考文獻：

[1] 郭齊勝，宋暢，樊延平.作戰概念驅動的裝備體系需求分析方法[J].裝甲兵工程學院學報，2017，31（6）：1-5.

[2] 葉秋玲，汪強.美軍發布多域作戰概念最新1.5版本[J].軍事文摘，2019（5）：51-54.

[3] 陳穎麗.基于SVG的管廊監控信息可視化[J].信息技術與信息化，2018（8）：19-21.

[4] 蔡瑞初，林殷嫻，艾鵬.SBV：基于SVG的生物信息可視化軟件[J].計算機科學，2017，44（10）：33-37，50.

[5] 馬德濤，王銳，黃毅.基于SVG的電子海圖復雜矢量符號繪制方法[J].海洋測繪，2017，37（5）：71-75.

【通聯編輯：謝媛媛】