基于可扩展架构的SVG图形系统的设计与实现

张学勇，韩 晓，李佳阳，孙云枫，邹金良

(1.南瑞集团公司（国网电力科学研究院），江苏南京211106；2.国电南瑞科技股份有限公司，江苏南京211106)

基于可扩展架构的SVG图形系统的设计与实现

张学勇1，2，韩 晓1，2，李佳阳1，2，孙云枫1，2，邹金良1，2

(1.南瑞集团公司（国网电力科学研究院），江苏南京211106；2.国电南瑞科技股份有限公司，江苏南京211106)

着重阐述了以可缩放矢量图形(SVG)为核心的可扩展架构的WEB图形的设计和实现技术，研究和建立了基于SVG标准的电力系统的图元库和统一的SVG图形发布格式。研发应用了跨语言接口调用的技术和跨语言结构化消息通信机制，研发应用了以服务器推送技术实现WEB画面数据异步通信机制。基于SVG和可扩展的WEB图形系统，有效解决了模型信息动态刷新时对实时性要求高的问题，提升了WEB图形应用于电网运行控制系统的水平，并在实践中得到了应用。

SVG；可扩展架构；跨语言；服务器推送技术

电网运行控制系统发展的目标是保障电网安全稳定运行[1]，其中图形系统是调度自动化系统的重要组成部分[2]。图形化显示作为人机交互的一部分和应用系统等集成在一起，但无法直接在WEB上发布。可缩放矢量图形（SVG）的出现为电网控制运行系统的图形数据在WEB上发布提供了一种开放性的解决方案[3，4]，结合SVG特点，有效解决了电网图形在WEB上发布的问题[5]。

1 SVG图形建模

1.1 设备图元建模

电力系统的图元设备在图形系统中都用一致的图标表示[7]。根据SVG的相关标准，使用预定义图元的显示形状，即可以完成了图元与设备的对应。

1.2 SVG图形建模

引用预先定义的SVG图元库，建立SVG格式的图形，用SVG的标签引用图元库中定义的标签的id，图1展示了WEB图形上显示的断开状态的开关图元。

图1 开关图元

图形分平面模式在电网图形支撑系统中被普遍使用，SVG通过标签，很好地支持图形分层，实现多平面嵌套机制[6]。

1.3 自动转换SVG

电网控制系统的图形描述语言是G语言规范[7]，是应用于电力系统一种新型高效的图形描述语言[8，9]。浏览器无法直接显示基于G语言描述的图形文件，需要设计SVG转换程序，实现从图形G文件转换成SVG标准格式[10]。

本WEB图形系统利用当前电力系统中的图形模块提供的标准接口获取到设备图元的位置和应用属性，实现了从CIM/G图形文件到SVG文件的转换，转换流程如图2所示。

图2 自动生成SVG流程图

2 系统结构设计

本WEB图形系统基于上述建立的SVG图形模型，将CIM/G图形文件转换为SVG标准图形。图3给出一个基于SVG的WEB图形系统的可扩展的设计方案。

图3 WEB图形系统的结构模型

设计方案分为三层设计，分为前端层、WEB服务层和应用服务层。WEB图形系统的数据来自应用服务层，图形展示数据来自于WEB服务层。本图形系统在以下方面进行了改进：

（1）实现了WEB服务器与应用服务器分布式部署的技术，配置WEB集群和应用服务器集群，在大并发量访问情况下，可单独对WEB服务器或应用服务器进行扩展。

（2）实现了跨语言接口调用技术，在WEB服务层（Java）直接调用应用层（C++）的接口，直接获得应用层的运行数据。

（3）采用了一种跨语言序列化消息通信技术，实现了在WEB服务层与应用层之间能直接传输较复杂的结构体参数。

（4）实现了服务器数据推送技术，WEB服务层能感知到服务器上数据变化，并把这种变化状态主动通知到客户端。

3 系统实现

3.1 应用分离部署技术

WEB服务器和应用服务器各作为独立的集群发布，WEB服务器对外提供一个统一的发布地址，集群内部做负载均衡管理。WEB图形系统的数据刷新的流程如图4所示。首先客户端发起数据请求，然后WEB服务层通过资源管理服务，定位应用主机服务器，最后把获得的主机服务器数据发送到客户端，以后当数据有变化时，WEB服务器会主动把数据推送到客户端。

3.2 跨语言接口调用技术

本图形系统基于JNI（Java Native Interface）框架[11]实现了WEB图形系统接口与应用服务器数据接口的映射，这样就可以在WEB服务层直接调用应用层的接口。实现步骤如下：

（1）先定义公共的Java类，定义满足JNI规范的公共的Java接口声明。

图4 应用数据获取流程

（2）用Java平台提供的生成头文件命令自动生成目标语言声明的头文件。

（3）根据生成的目标语言的头文件，定义相应的函数实现体，最终编译成可以被调用的目标平台的动态库。

3.3 跨语言结构化通信技术

为了降低消息通信中的网络带宽和提高消息体解析的简便性，WEB图形系统研究采用了ProtocolBuffer作为服务层之间消息通信的数据格式，下面以WEB图形系统中动态着色的颜色消息为例介绍跨语言结构化通信技术的具体实现。

（1）分析并确定着色消息的结构体，结构体中定义了线色、填充色、是否闪烁等信息。消息结构体示意如图5所示。

图5 消息结构

（2）用ProtocolBuffer提供的基本类型描述消息结构体，文件描述内容如图6所示。

图6 Proto结构定义

（3）最后把proto文件编译成目标语言描述文件。经ProtocolBuffer序列化后的二进制信息非常紧凑，消息的体积小，被人截获后无法被人直接读取编辑。这种特性应用在WEB图形系统上能防止消息被篡改、被泄露的安全风险，提升了WEB图形系统的可靠性和安全性[12]。

3.4 数据推送技术

本WEB图形系统基于Atmosphere框架实现了图形数据推送功能，WEB图形系统的推送架构如图7所示。

图7 推送架构

主动推送技术是一种旨在提供富互联网应用，改善B/S结构应用的用户体验。

4 WEB图形在电网控制系统中的应用

WEB图形直观地显示出电网运行控制系统的运行状态，让使用者能够方便快捷地了解当前电网运行控制系统的运行状态。当前基于SVG实现的WEB图形按照预定义电压等级的颜色显示。当根据拓扑分析结果时，将带电的设备和线路高亮显示，不带电的统一显示一种颜色。当设备状态变化时，WEB图形会根据新的拓扑分析颜色重新渲染。SVG支持在输电线路上叠加箭头显示潮流，其中箭头方向对应潮流走向，SVG支持动画能够使这些箭头形成流动效果。

广东中调OCS系统WEB图形系统发布的图形如图8所示。

图8 WEB图形厂站图

5 结束语

本文建立了可扩展的面向电网运行控制系统的WEB图形架构，并应用了最新的计算机发展技术实现了WEB图形结构，采取了灵活的平面显示策略，满足了多种应用的显示需求。目前该图形系统已经在工程项目中应用，完全满足电力调度对WEB图形的多种需求。（1）数据报文采用序列化二进制方式传输，保证了数据的安全性，减小了数据传输的带宽占用；（2）可扩展的结构方式，可单独扩充WEB服务器或应用服务器；（3）数据推送技术实现了数据的实时刷新。

[1]姚建国，杨胜春，高宗和.电网调度自动化系统发展趋势展望[J].电力系统自动化，2007，31（13）：7-11.

[2]蒋元晨，潘正珏.电力管理信息系统中图形的Web发布[J].电力系统自动化，2003，27（18）：61-64.

[3]郭创新，齐 旭，朱传柏，等.基于SVG的电力调度图形支撑平台设计与实现[J].电力系统及其自动化学报，2007，19(2)：28-33.

[4]黄华梅，杨信廷，杨宝祝，等.基于 AJAX和SVG的组态软件Web发布模型[J].计算机工程与设计，2010，31(11)：2629-2633.

[5]孙 虹，李昆明，王 林，等.基于WEB的省级能效管理平台的设计与应用[J].江苏电机工程，2014，33(2)：48-51.

[6]沈剑云，孙利超，刘子英.基于SVG的SCADA图模库一体化系统的研究[J].工业控制计算机，2008，21(12)：27-28.

[7]李 伟，辛耀中，沈国辉，等.基于CIM/G的电网图形维护与共享方案[J].电力系统自动化，2015，39（1）：42-47.

[8]李亚平，姚建国，黄海峰，等.SVG技术在电网调度自动化系统中的应用[J].电力系统自动化，2005，29（23）：80-82.

[9]敖丽敏，李林辉.基于AJAX的电力图形系统的实现[J].电力系统自动化，2007，31（9）：47-81.

[10]何 岩.基于AJAX/SVG的EMS Web监视系统的研究[D].成都：西南交通大学硕士研究生学位论文，2005.

[11]米 洪，郑 颖.基于SOCKET和JNI的Java与C++通信对比研究[J].软件导刊，2009，08（1）：71-72.

[12]边 玲，仲学飞.压缩技术在实时信息系统中的应用[J].电力系统通信，2009，30（198）：41-44.

Design and Implementation of SVG Graphics System Based on Extensible Architecture

ZHANG Xueyong1,2,HAN Xiao1,2,LI Jiayang1,2,SUN Yunfeng1,2,ZOU Jinliang1,2
(1.NARI Group Corporation(State Grid Electric Power Research Institute),Nanjing 211106,China; 2.NARI Technology Development Co.Ltd.,Nanjing 211106,China)

The paper emphatically elaborated the design and implementation technology of WEB graphics based on extensible architecture with SVG(Scalable Vector Graphics)as the core.To realize the technology,power system graphics library and unified SVG graphics publishing format were studied and set up based on the SVG standard.Besides,the R&D applied interface call technology and structured message communication mechanism across different languages.What's more, asynchronous communication mechanism of WEB graphical data was achieved based on server pushing technology.The SVG and scalable WEB graphics system help effectively solve the problem of strict requirement for real-time performance when the model information is dynamically refreshed,improving the level of WEB graphics applied to power grid operation control system.Now the SVG and scalable WEB graphics system has been applied in practice.

SVG;extensible architecture;across different languages;server pushing technology

TM76

A

1009-0665（2016）06-0079-03

张学勇（1983），男，江苏兴化人，工程师，从事电网调度自动化系统的开发与研究工作；

韩 晓（1982），男，山东泰安人，工程师，从事电网调度自动化系统的开发与研究工作；

李佳阳（1983），女，江苏连云港人，工程师，从事电网调度自动化系统的开发与研究工作；

孙云枫（1974），男，江苏靖江人，高级工程师，从事电网调度自动化系统的开发与研究工作；

邹金良（1985），男，江苏盐城人，工程师，从事电网调度自动化系统的开发与研究工作。

2016-08-01；

2016-09-18