1、本栏目责任编辑：代影网络通信与安全Computer Knowledge and Technology电脑知识与技术第19卷第6期(2023年2月)第19卷第6期(2023年2月)基于SVG的电磁作战概念可视化技术蒋鸣远，李晓，李复名（中国电子科技集团公司第二十九研究所，四川 成都 610036）摘要：随着电磁频谱作战概念涉及要素越来越多，且交互关系越来越复杂，概念的可视化技术作为作战概念分析、演示和讲解的关键技术之一，对先进的新型作战概念研究越来越重要。基于SVG的电磁作战概念可视化技术充分利用了SVG标签内部动画可定制性和Vue框架的属性动态绑定机制，实现了10种具有作战特色的基本的动画元素
2、，支持以配置的方式组合这些动画元素以实现对作战概念的可视化构建，对非专业编程人员较为友好。关键词：SVG；作战概念；Vue；可视化中图分类号：TP311.5文献标识码：A文章编号：1009-3044(2023)06-0064-02开放科学（资源服务）标识码（OSID）：0 引言随着电子信息科技的发展，电子战正在走向电磁战，电磁战是一项自顶而下的体系工程，其不仅具有新的作战样式和作战理念，同时对于武器装备的能力增强具有顶层的牵引作用。在电子战武器装备发展论证中，首先需求开展先进的作战概念的顶层设计，推动武器装备体系结构设计优化，进而促进部队战斗力生成模式转变，这也成为现代信息化武器装备发展论证的
3、重要途径1。近年来，以美军为首的军事强国对电磁作战能力越来越重视，其针对电磁域提出了电磁机动战、电磁频谱战、多域战2等各式各样作战概念，这些电磁频谱作战概念通常包含陆、海、空、天等各个作战域内的作战平台，同时涉及雷达、通信、电子战、导航等电磁行动且交互关系复杂，因此如何用友好的交互手段演示出复杂的作战概念内涵及过程，是当前电磁作战概念研究的重要组成部分。在过去，电子战的作战概念演示主要的手段是以静态图片结合幻灯片播放的方式，该方式在某种程度上能够展示出作战概念的过程，并且通过人工对于不同的素材进行灵活调整，但该方法的复用性较差，且幻灯片的动画特效专业性较弱，不能有效反映出过程步骤背后的含义，交
4、互效果不够完美；另一种交互手段是视频动画制作的方式，该方式能够有效的展示出电磁作战概念的过程和内涵，交互效果也很突出，但是视频动画制作的技术门槛较高，不适用于从事电磁作战概念研究的人员。本文提出一种基于SVG的作战概念可视化技术，能够在制作技术成本和可视化效果之间取得较好的平衡，一方面拥有诸多军事领域内的专业动画组件可以灵活复用，另一方面通过JSON配置文件的方式作为入参也极大降低了对二次开发人员的要求。SVG（Scalable Vector Graphics，可伸缩矢量图形）是W3C组织制定的二维图形格式3-4，是基于XML的矢量图形描述语言，能便捷地与Javascript和CSS进行交互5
5、，在二次封装时SVG图像可以像HTML网页一样有很好的可读性，在React、VUE这种数据驱动视图的框架下，制作SVG动画就变得更加灵活。本文设计并实现一个基于SVG的电磁作战概念可视化模块，以JavaScript语言为开发语言，使用Vue框架编制以SVG图形格式为基础的组件，使之可以方便地应用在Web或桌面应用的平台之中，实现了作战案例分步骤、可伸缩的展示，目前已经开发了十种作战案例展示中常见的动作，为用户提供了更多角度、更为直观和更加丰富的交互体验，同时本文所设计可视化模块考虑二次开发的需求，整合可视化的过程控制入参为一套简单易学的基于JSON格式的配置规则，提升了模块的复用性。1 设计与
6、实现1.1 基本架构DOM树根组件SVG标签配置属性配置属性图形动画标签1配置子属性配置子属性图形动画标签2配置子属性配置子属性图形动画标签3配置子属性配置子属性图形动画标签4配置子属性配置子属性图形动画标签5配置子属性配置子属性图形动画标签6配置子属性配置子属性图1 模块组件结构图。本文所述的可视化模块通过对配置文件的处理，快速在SVG标签内生成出各种作战概念动作子标签，其架构如所示。在Javascript程序中，本文所述模块将各类图形动画单独封装为VUE组件，并提供了各类图形动画的基本模板，用户通过输入不同的数据及配置文件灵活地进行绘图和内容调整。SVG图片的元素样式采用CSS进行定义，动
7、画效果则通过SVG参数属收稿日期：2022-10-25作者简介：蒋鸣远（1991），男，四川隆昌人，工程师，硕士，主要研究方向为数据可视化、Web前端应用；李晓（1991），女，重庆人，工程师，硕士，主要研究方向为电磁信号分析；李复名（1989），男，湖北武汉人，高级工程师，博士，主要研究方向为作战概念研究。E-mail：http：/Tel：+86-551-65690963 65690964ISSN 1009-3044Computer Knowledge and Technology电脑知识与技术Vol.19,No.6，February202364DOI:10.14004/ki.ckt.202
8、3.0302网络通信与安全本栏目责任编辑：代影Computer Knowledge and Technology电脑知识与技术第19卷第6期(2023年2月)第19卷第6期(2023年2月)性进行动态控制。1.2 实现方法本文所述可视化模块主要采用JavaScript语言进行开发，JavaScript是一种解释型编程语言，其相关生态链被广泛应用于WEB前端开发，JavaScript在人机交互领域的技术已经非常成熟。Vue框架是一套用于构建用户界面的渐进式JavaScript框架，其核心库只关注视图层，易于学习，也容易与其他库或已有项目整合，Vue通过尽可能简单的API实现响应的数据绑定和组合的
9、视图组件。Vue的基于模板开发的模式非常适合于SVG标签的属性绑定和参数传递，Vue的组件开发方式也适用于构建和扩展电磁作战概念中基本的动画元素，因此本文所述模块选用JavaScript作为编程语言，Vue作为底层框架。按照基本架构的设计，本文所述的可视化模块的Vue模板结构如图 2所示。图2 可视化模块模板结构图图形生成模块本文所述的可视化模块的核心，包括了导弹发射动画、作战对象静态展示、作战对象直线匀速运动、作战对象直线加速运动、作战对象操场形巡逻移动、作战对象圆形巡逻移动、地面固定目标动画、爆炸动画、通信链路、电磁波动画共计10种子组件，每种子组件再通过v-if属性进行显隐控制，又通过v
10、:bind的属性传递机制获取动画的效果控制参数进行进一步操作。后续若有新的动画类型则可以直接在图形生成模块中进行扩展。本文所述的可视化模块会定义一块给出长度和宽度的SVG画布建立二维坐标轴，所有元素的绘制将以画布的左上角为坐标轴原点，x轴向右正向增长，y轴向下正向增长，画布示意如图 3所示，模块将会读取配置文件中的相应资源设置为画布背景。画布背景xy0任意元素任意元素给定长度给定高度图3 画布示意图2 技术特点2.1 图形功能多样化本文所述的电磁作战概念可视化模块的一大特点是能够绘制具有一定军事特色的图形动画，表1概括了目前已经集成的电磁作战概念基本动画素材，二次开发用户在使用时只需要在配置文
11、件中给出相应的动画类型即可快速绘制出不同的动画效果。表1 基本动画素材动画名称电磁波动画爆炸动画通信链路动画导弹发射动画地面固定目标目标直线匀速运动目标直线加速运动目标操场形巡逻移动目标圆形巡逻移动目标静态展示简介绘制从一个目标向另一个目标或固定点发射电磁波的动画，波束宽度和刷新频率及颜色均可配置绘制一个目标被摧毁的爆炸效果，出现时间和持续时间均可配置绘制多个目标之间的通信链路，支持信息流动动画，支持单向或双向配置绘制导弹发射动画，可配置导弹打击目的地坐标绘制固定目标，可配置显隐进出动画绘制目标在画布中直线匀速移动，可配置移动速度，旋转角度，循环次数等绘制目标在画布中直线加速移动，可配置开始时
12、间和结束时间等绘制目标在画布中按操场形状进行移动，可配置进入画布坐标点、循环次数、单圈持续时间、离场坐标点等绘制目标在画布中按圆形形状进行移动，可配置进入画布坐标点、循环次数、单圈持续时间、离场坐标点等在画布中的指定坐标直接绘制一个目标的图像信息，图像的大小，旋转角度均可配置受形式所限，这里仅列出部分动画的截图效果，如图 4、图 5、图 6所示，其中电磁波动画是不断有波束一层层向外扩散且由近到远逐渐变淡，爆炸动画也是从无到有的一团火焰效果，通信链路动画是通过虚线的流动来展示通信链路的状态和方向的：图4 电磁波动画截图图5 爆炸动画截图图6 通信链路动画截图2.2 二次开发能力为进一步提升本可视
13、化模块的可用性，模块的所有动画效果控制均已封装，通过传入的JSON格式的配置文件进行控制，非专业编程人员也能够通过修改配置开发不同的作战概念演示案例，这里本文给出一个简单的示例对配置规则进行介绍：（下转第68页）65本栏目责任编辑：代影网络通信与安全Computer Knowledge and Technology电脑知识与技术第19卷第6期(2023年2月)第19卷第6期(2023年2月).userspacesize=XT_ALIGN(sizeof(structxt_tls_info),.help=tls_help,/输入 iptables-mtls-h调用.save=tls_save,.x
14、6_parse=tls_parse,/解析命令行参数;使用iptables的示例如下：1）阻止去往facebook的流量：sudo iptables-A OUTPUT-p tcp-dport 443-mtls-tls-host -j DROP2）模糊匹配：sudo iptables-A OUTPUT-p tcp-dport 443-mtls-tls-host*-j DROP3）域名集匹配：sudo iptables-A OUTPUT-p tcp-dport 443-mtls-tls-hostset blacklist-j DROP域名集中添加域名：sudo echo+ /proc/net/xt
15、_tls/hostset/blacklistsudo echo+ /proc/net/xt_tls/hostset/blacklist域名集中删减域名：sudo echo- /proc/net/xt_tls/hostset/blacklist4 结论针对一个IP经常会对应多个域名在使用Linux系统自带的防火前进行IP阻断会发生误阻断的问题，基于Netfilter/Iptables框架开发了一个Linux内核模块进行基于域名或者域名集的阻断，具体原理是使用HTTPS协议中的SNI标示。实验表明，在配置了基于域名的相关规则后对应的流量被正常阻断，而且规则支持精准匹配和模糊匹配。参考文献:1 赖隽
16、文,张焕杰,杨寿保.大规模WWW虚拟主机设计J.小型微型计算机系统,2001,22(3):373-375.2 姚晓宇,赵晨.Linux内核防火墙Netfilter实现与应用研究J.计算机工程,2003,29(8):112-113,163.3 王一平,韦卫.网络安全框架Netfilter在Linux中的实现J.计算机工程与设计,2006,27(3):439-442,468.4(美)Robert Love.Linux内核设计与实现M.2版.陈莉君,康华,张波.北京:机械工业出版社,2006.5 Daniel P.Bovet,Marco Cesati.深入理解LINUX内核M.陈莉君,张琼声,张宏伟，译.北京:中国电力出版社,2007.6 毛伟杰,李永忠.基于SNI的加密流量检测在蜜罐中的研究与应用J.信息技术,2021,45(8):97-101.7 毛新宇.Linux内核防火墙netfilter的原理和应用J.微型机与应用,2004,23(4):35-37.8 岳新.Linux2.4内核下基于Netfilter框架可扩展性研究与实现D.哈尔滨:哈尔滨理工大学,2005.【通联编辑：光文玲】
