基于Java Web的图形化电网线损计算

摘要：本文研究了基于多比图形控件的配电网线损在线可视化计算，介绍了多比图形控件在配电网图模可视化、线损在线、电力图元实时显示过程中的应用。阐述了多比图形控件(SVG/Flex/VML版)的优点及其应用在电力图形系统中的可行性和优越性，指出结合Java／XML和多比图形控件技术可以较好地实现电力图形系统。本文在Java平台上对电力图形系统结构、多比图形控件文件的绘制、图形同步刷新以及事件处理的实现等方面进行了分析和设计，实现了基于多比图形控件的电力图形系统。

关键词：电力图形系统； 多比图形控件；图形同步刷新； 图形事件处理

中图分类号：TM73；TP312  文献标识码：A  文章编号：10034897(2005)21-0069-0

引言

在各种电力系统应用软件中， 电力图形化表达的重要组成部分。鉴于目前各种电力系统大多数为B/S结构， 而基于浏览器的矢量图编辑和展示技术已成为当下的热门课题。电力系统的发展迫切需要推出一种图形标准来避免重复的劳动和不同厂商图形格式之间的不兼容。

 

文献中阐述了多比图形控件在电力系统软件领域的应用及其关键问题，并且指出多比图形控件可以提升基于 Web的电力系统软件图形化的特性，不过对于基于多比图形控件的图形系统如何构建以及如何有效的将多比图形控件应用到电力系统软件中在文中并没有深入探讨。本文将集中探讨如何使用Java／多比图形控件技术实现电力图形系统，在系统设计、多比图形控件的绘制、关联配置数据库的设计以及图形同步刷新和图形事件处理等方面进行了深入的探讨。

 

多比图形控件简介

作为新的富客户端互联网技术， Flex这种技术已经在越来越多的电力图形化应用中采用。 使用Flex的富客户端应用，解决了异步调用，界面无刷新，浏览器兼容性等多项难题。用任何你熟悉的WEB编程语言，如.net,php,jsp,webservice等等，作为后台数据访问层,可以使用。

然而，对于企业级应用开发来说，缺乏有经验的Flex程序员是不争的实事。大多数的软件开发企业并没有专门的Flex程序员， 这使得原生的Flex程序开发变得困难重重。和Flex原生程序编程相比较，多比控件采用Flex+Javascript的方式。 它一方面利用了Flex的强大图形表现力；在另外一方面，采用100%的纯Javascript API接口的方式，降低了学习的难度曲线。Javascript程序员很多，即使不会， java/.net程序员学习起来也很容易。Javascript异常和错误，非常容易调试，并且可以利用浏览器的内部调试工具在线调试。

多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件， 类似于网页上的Visio控件。多比图形控件具有类似Visio那样的设计界面，允许用户非常方便地制作自己的图形符号，绘制漂亮的矢量图形。同时，多比控件也对位图支持的非常好，对jpg、gif和png全面支持。 多比控件可以容易的访问web上的图片，这使得应用的集成和更新都更加的容易。多比控件图形的基本属性繁多，基本能涵盖了目前电力图形化应用的各种需求。控件中的图元有非常严格的继承关系， 利用继承、多态、和覆盖技术， 用户可以轻易的修改图元的行为，定制自己的专属的矢量图形应用，而不需要修改一行多比的核心代码。这种机制保证了每一次多比控件的更新，程序员都可以透明的更新。

图形同步刷新和事件处理的实现

       图形的同步刷新和图形事件处理是图形系统运作的核心。图形同步刷新指的是实时图元必须与实时数据对象相关联，以不同的样式显示不同的实时 状态，满足同步速度足够快使图形的显示与实时数 据的刷新同步。图形事件处理指多比图形控件画面中某些 图元能够响应鼠标事件或其它事件，这样才能在触 发图元的某些事件(比如鼠标点击)的时候，系统可以执行相应操作。

       多比图形控件直接使用Javasript语言对多比图形控件文档及图元操纵的方法，可以在Javasript语言中直接对多比图形控件文档添加、删除和修改图元属性。多比图形控件采用面向对象和松耦合的方式， 使得程序存取数据和更新图形界面成为两个互不干扰的过程。 程序员可以通过AJAX，HTTP长连接，甚至是HTML5中Websocket的方式存取数据， 成功获取数据后， 才利用多比提供的API， 刷新Web的Flex界面。实时数据刷新的同时，画面也会同步刷新。

自定义电力矢量图元

电力图形系统中，往往包含有多种图元， 电力CIM标准也对此有详细的说明。 为了保障电力图形系统中的图元表达的灵活性， 图形控件一定要具备自定义图元的能力。 矢量图元是根据几何特性来绘制图形，矢量可以是一个点、一条线、圆等等的几何形状。它的特点是放大后图像不会失真，和分辨率无关，文件占用空间较小。

那么如何定义一个下面类似的变压器图元呢？ 注意图中的图形，都是由同一个图元，设置不同的长宽得来的。

 

 

每一个图元，都有一个draw函数，我们只需要覆盖这个draw函数就可以了。具体的代码见下面。

//定义一个电阻的矢量图元

DianluShapes.Dianzhu = StandardShapes.Rectangle.extend({

    //重载draw函数，让

    draw: function () {

        this.logDebug("draw(), r=%s", this.r);

        this.setupGraphics();

        var changdu = 20;

        //画左边的接线点

        this.canvas.drawLine(this.id, -this.width / 2, 0, -changdu / 2, 0);

        //画中间的电阻

        this.canvas.drawRect(this.id, -changdu / 2, -this.height / 2, changdu, this.height);

        //画右边边的接线点

        this.canvas.drawLine(this.id, changdu / 2, 0, this.width / 2, 0);

    }

});

自定义电力图元属性

多比图形数据本身只包含用来实现矢量图形显示的信息，如坐标点、显示样式等信息，而不包含和业务相关的数据。为了满足电力系统的需要，多比图形控件采取了基于XML/JSON格式的数据存储方式，除了使用其内置的属性外，可以对其属性进行任意扩充，以实现自定义的功能。 自定义数据对象是顶点或连线表示的后台数据。它可以是图形和形状相关的数据，也可以是元素对应的后台业务数据。 例如，一个节点，代表发电机，而发电机的资产标号， 设备技术参数等业务逻辑数据就可存储在自定义数据对象中。自定义数据对象可以是字符串，也可以是更复杂的javascript对象。

自定义数据非常简单， 例如

sa.onready = function(){

                var cld = sa.getShapeByPath("Cloud-0");

                cld.yourdata = "资产编号";

}

定义了数据以后，我们就可以使用cld.yourdata来取得。一个比较有意思的需求是，我们如何在属性编辑器中看到我们自定义的数据，并且让他持久化下来。（保存到数据库，XML中等等）

 

这就需要我们覆盖getUserProperties函数，变成以下的样子：

getUserProperties: function() {

    return [{

                    title: "我的数据",

                    name: "yourdata",

                    type: "string"

    }];

},

如果还需要用户定义宽度，高度，颜色等， 我们可以先获得基类的属性，再把我们的数据添加上去。

getUserProperties: function() {

    //将基类的数据，和我们的数据合并在一起

    return jQuery.merge(

        //调用基类的方法，获取基类的用户数据

            this.base(),

            [{

                    title: "我的数据",

                    name: "yourdata",

                    type: "string"

            }]

    );

},

 结束语 

本文从实时刷新、自定义电力矢量图元、自定义电力图元属性等方面，进行了Web应用B/S应用中图形表达方式的研究，确立了以多比控件为基础的电力系统图形系统的基础构架，并在Java平台的基础上进行了实现，在实际中得到了应用，效果良好。