蔣鳴遠 李曉 李復(fù)名

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

關(guān)鍵詞：SVG；作戰(zhàn)概念；Vue；可視化

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

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

開放科學(xué)（資源服務(wù)）標識碼（OSID）

0 引言

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

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

本文設(shè)計并實現(xiàn)一個基于SVG的電磁作戰(zhàn)概念可視化模塊，以JavaScript語言為開發(fā)語言，使用Vue框架編制以SVG圖形格式為基礎(chǔ)的組件，使之可以方便地應(yīng)用在Web或桌面應(yīng)用的平臺之中，實現(xiàn)了作戰(zhàn)案例分步驟、可伸縮的展示，目前已經(jīng)開發(fā)了十種作戰(zhàn)案例展示中常見的動作，為用戶提供了更多角度、更為直觀和更加豐富的交互體驗，同時本文所設(shè)計可視化模塊考慮二次開發(fā)的需求，整合可視化的過程控制入?yún)橐惶缀唵我讓W(xué)的基于JSON格式的配置規(guī)則，提升了模塊的復(fù)用性。

1 設(shè)計與實現(xiàn)

1.1 基本架構(gòu)

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

1.2 實現(xiàn)方法

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

按照基本架構(gòu)的設(shè)計，本文所述的可視化模塊的Vue模板結(jié)構(gòu)如圖 2所示。

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

2 技術(shù)特點

2.1 圖形功能多樣化

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

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

2.2 二次開發(fā)能力

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

配置開發(fā)不同的作戰(zhàn)概念演示案例，這里本文給出一個簡單的示例對配置規(guī)則進行介紹：

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

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

url：''，//圖像的base64URL

startAxis： [880， 380]，//開始出現(xiàn)的坐標

baseAttribute： {

width： 60，//圖像寬度

height： 57，//圖像高度

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

}，

// 電磁波動畫

waveTarget： {

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

// 發(fā)波目標地優(yōu)先級高于waveTargetId

// targetAxis： [915.5，388.5]，

deg： 45， // 波束角度

beginSec： 7， // 開始發(fā)波時間，單位秒

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

count： -1， // 發(fā)波次數(shù)，-1表示無限次

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

// 波形動畫

effect： {

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

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

deg： 45， // 變化后角度

distance： 60// 變化距離}

}

}

二次開發(fā)用戶可以根據(jù)想要的效果靈活調(diào)整上述配置，調(diào)整后的配置將作為輸入?yún)?shù)傳入可視化模塊中對動畫效果進行控制。

3 結(jié)束語

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

參考文獻：

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

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

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

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

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

【通聯(lián)編輯：謝媛媛】