基于SVG的電磁作戰(zhàn)概念可視化技術(shù)

蔣鳴遠(yuǎn) 李曉 李復(fù)名

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

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

中圖分類號(hào)：TP311.5? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2023）06-0064-02

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

0 引言

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

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

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

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

1.1 基本架構(gòu)

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

1.2 實(shí)現(xiàn)方法

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

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

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

2 技術(shù)特點(diǎn)

2.1 圖形功能多樣化

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

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

2.2 二次開發(fā)能力

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

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

{? type： 'equipage'，//動(dòng)畫類型

name： '目標(biāo)'，//圖像名稱

url：''，//圖像的base64URL

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

baseAttribute： {

width： 60，//圖像寬度

height： 57，//圖像高度

dur： 3//漸進(jìn)動(dòng)畫持續(xù)時(shí)間，單位秒

}，

// 電磁波動(dòng)畫

waveTarget： {

waveTargetId： '4'， // 電磁波照射目標(biāo)ID

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

// targetAxis： [915.5，388.5]，

deg： 45， // 波束角度

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

dur： 3， // 波跑動(dòng)所需時(shí)間，單位秒

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

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

// 波形動(dòng)畫

effect： {

beginSec： 3， // 動(dòng)畫開始時(shí)間，單位秒

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

deg： 45， // 變化后角度

distance： 60// 變化距離}

}

}

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

3 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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