基于SVG和Ajax的电网一次接线图实现

2010-10-22曲锋

电网与清洁能源 2010年3期

曲锋

（电子科技大学自动化工程学院电力系统广域测量与控制重点实验室，成都 611731）

0 引言

电网一次接线图是电网能量管理系统中人机交互功能的重要组成部分之一，通过它可以直观地查看各监测节点的实时数据，了解电气设备的运行状态[1]。在B/S模式下实现电网一次接线图，需要完成以下2项工作：图形图像的显示和实时数据的传输。

目前基于WEB的图形图像显示多采用位图图像或Java Applet的方式，但位图图像无论大小还是内容一旦固定就无法编辑，无法满足动态传输的要求；而Java Applet虽然可以较好解决以上问题，但其在反应速度、可编辑性、可重用性等方面依然存在很多障碍，影响了对用户的交互性和友好性。SVG（Scalable Vector Graphics）作为新一代的矢量图形语言，解决了以往在WEB端难以显示动态图形的问题，且具有交互性高、易编辑、跨平台等特点，更适于实现电网一次接线图的绘制。

而在实时数据传输与刷新方面，Ajax（Asynchronous JavaScript and XML）是一个很好的选择。Ajax是一种新的WEB开发模型，综合运用了JavaScript和XML等已经成熟的技术，改变浏览器客户端和服务器端传统的同步交互通信方式为异步通信交互方式，解决了浏览器频繁刷新页面等待数据传输的问题，改善了WEB应用程序的用户体验。SVG基于XML，通过Ajax技术可以方便地对其进行编辑和控制，因此，采用SVG结合Ajax技术来实现电网一次接线图是一种更为有效的方案。

1 相关技术

1.1 SVG

SVG是基于XML语言的可伸缩矢量图形语言描述规范。它提供了矢量图形、图像、渐变填充、文本和动画等图形对象，图形对象还可以进行分组、添加样式、变换、组合等操作[2]。SVG主要特点如下。

1）SVG动态交互功能强大，可利用DOM接口进行编辑，通过脚本定义来达到高亮显示、声音、动画等效果，并能对用户操作做出不同的响应；

2）SVG图像中的文字独立于图像，文字标注也可被动态地移动和缩放，方便对内容的编辑和修改；

3）SVG图像的清晰度适合任何屏幕分辨率或打印分辨率，不会产生位图图像的马赛克现象，用户可以自由地缩放图像，查看图像中数字和文本等内容；

4）SVG是基于XML来表达知识、传递数据的，这就意味着它继承了XML的跨平台性和可扩展性，从而在图形可重用性上迈出了一大步。

1.2 Ajax

Ajax并不是一项新的技术，而是多种技术的综合，其中包括JavaScript、DOM、XML和XMLHttpRequest等；利用DOM（文档对象模型）进行动态显示和交互，使用XML进行数据存储和操作，使用XMLHttpRequest进行异步数据接收，使用JavaScript将以上各项技术绑定在一起。Ajax采用异步交互方式，在用户和服务器之间引入了一个中间媒介，从而改变了同步交互过程中的“处理—等待—处理—等待”模式，用户行为和服务器端数据处理过程可平行进行。浏览器不必等待用户请求操作，也不必更新整个窗口就可以显示新获取的数据。只要来回传送采用XML格式的数据，在浏览器里面运行的JavaScript代码就可以与服务器进行联系。执行结果到达时，才会通知浏览器客户端，使之能够在合适的时间显示执行结果。Ajax异步交互过程如图1所示。

图1 Ajax的异步传输过程

2 实例应用

2.1 SVG电力图元设计

SVG中提供了线段、矩形、圆、椭圆、折线和多边形6种基本图形元素和一个绘制复杂图形的路径元素（path），但在电网一次接线图中则会有数以百计的形状复杂的电力设备图元，如电容、电阻、发电机、两相变压器、三相变压器、开关、刀闸等，在图形不同区域对于同种设备图元的图形结构是完全一样的，只是图形的位置、方向等不同。因此可以通过基本图形对电力图元进行设计，并将每种设备图元定义为一个图元类，在图形的不同区域对各图元类进行引用。这样既方便对图元进行编辑管理，也减小了图像文件的大小，有利于文件的传输。

SVG中提供了对图形进行定义和引用的机制，提供了、、、4个元素。、和元素联合起来可以定义一个图元模板，同时对模板的样式风格等属性进行设置，再通过元素根据id以实例的方式引用该模板，进行实际的绘图操作，完成接线图的绘制。元素有4个属性：x、y、height和width，通过它们可以定义引用元素在矩形渲染区域的位置，再结合可以对图形位置和形状进行变换的Transform属性，就可以对图元进行平移、旋转和伸缩等操作。例如，下面的语句就描述了一个发电机的几何图形。

上例代码在浏览器中打开后的效果如图2所示。

图2 浏览器中显示的发电机图元

图2 中上方的发电机是直接引用模板中定义的图元进行绘制的图形，下方的发电机是在引用时添加了Transform属性进行平移变换后绘制的图形，运用这种方法就可以实现相同设备图元在不同区域的引用，有效减少重复代码，加快图形文件的展开速度。

2.2 SVG结合Ajax实现动态交互

SVG虽然能把数据以图形的形式表现出来，但是单纯的SVG却不能做到数据的实时传输和页面的自动更新。解决这一问题有多种实现方法，最简单直接的方法是采用JSP方式生成SVG文件，通过在页面头部加入刷新HTML的元标记定时刷新页面，从数据库中获得实时变化的数据。这种方法虽然简单易用，但在电网接线图这种数据量大、刷新时间间隔要求短、页面复杂的情况下，则会产生页面闪烁，交互性差等缺点，影响用户对实时数据的监测；文献[3]则提出了一种页面隐藏法，即在HTML中嵌入1个JSP页面，JSP页面负责读取数据，通过页面刷新实现数据的定时读取，利用JavaScript改变元素的显示属性。这种方法是通过在服务器端输出JavaScript语句到客户端来实现的，这样使得服务器端与客户端不具有松耦合性，同时服务器端的实时数据不具有重用性。Ajax是解决上述问题的一种更为有效的方法。在SVG中使用Ajax进行数据的刷新十分方便，见图3，其主要工作方式如下。

1）客户端定时发起请求，通过调用getURL函数实现与服务器的通信，函数的参数就是需要请求的服务器端JSP页面；

2）服务器端JSP页面实现与数据库的直接交互，通过执行SQL语句或者存储过程等方式获得所需数据，并将数据简单封装后发回客户端；

3）由于Ajax的异步性，只有当有数据传回客户端后，客户端才会调用相应的回调函数进行数据的提取和处理；

4）数据处理完毕后，通过JavaScript控制DOM树，使这些新的数据成为SVG文档的一部分，从而改变SVG页面上的现实。

图3 SVG数据刷新系统原理图

使用Ajax来完成SVG图形中数据的传输较之传统的页面刷新法和隐藏页面法的优势在于：

1）通过异步模式，在不刷新整个界面的情况下更新局部内容，提高了数据传输速度，提升了用户体验；

2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用；

3）Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下服务器的负载。

2.3 一次接线图的实现

图4和图5分别是一次接线图局部静态界面和数据刷新后的动态界面，不同的颜色用以表示不同等级的电压，电网各项数据通过Ajax技术从数据库系统获得，实时显示在相应设备和线路旁边，方便对电网运行状况进行监测[4]；同时也可在接线图中通过超链接功能实现到电压棒图、历史数据等不同功能页面的跳转，从而达到各项资源的综合利用。

图4 一次接线图局部静态界面

图5 一次接线图数据动态刷新界面

SVG基于XML的特性使得图形文件可以方便地进行编辑，进行电力图元的更新只需添加、修改或删除相应的文本语句就可轻松实现，但在编辑过程中要格外仔细，不正确的文本格式以及多余的标点符号（如逗号、空格等）都会导致SVG图形渲染失败；同时，SVG文本中添加的JavaScript脚本应尽量采用外部引用的方式，这样有利于减小图形文件的大小，也方便脚本代码的维护。