刘贤梅, 张锡强, 赵娅(东北石油大学,计算机与信息技术学院，大庆 163318)

基于HTML5的油田混输管道拓扑图动态绘制的研究

刘贤梅, 张锡强, 赵娅
(东北石油大学,计算机与信息技术学院，大庆 163318)

随着油田生产的需要与互联网技术的快速发展，油田管道的拓扑图应运而生。用户对油田管道拓扑图的使用和交互体验的要求也越来越高，传统的拓扑图绘制技术已难以满足用户的需求。HTML5能够解决基于插件的Web矢量拓扑图显示技术存在着需要下载安装、难以使用跨平台跨浏览器、存在不安全隐患以及在信息分析和交互能力上存在明显的缺陷等问题。采用HTML5的Canvas特性，利用HTML5的图形图像处理功能完成了对油田管道拓扑图的动态绘制。

HTML5； Canvas； 油田管道； 拓扑图绘制

0 引言

随着经济和社会的发展，石油的需求量越来越大，油田的智能化已经成为解决油田生产问题的根本关键，混输管道是油田生产当中最重要的基础设施之一，随着油田生产力的增长，管道的布设也越来越多，如何直观的反应管道的布局、随时随地利用管道拓扑图及其相关数据也变的越来越重要。然而用户己不满足于传统的基于C/S模式获取管道信息的方式，并且传统的基于HTML的超级文本标记语言的技术，不能够直接操作数据进行位图绘制，这种方法需要在客户端的浏览器安装插件以读取矢量的油田拓扑图数据并进行绘制和实现各种查询和分析功能。但是这些插件在使用之前都必须得下载和安装，有些还存在着浏览器兼容性的问题，给用户带来了诸多的不便，而且由于插件大多需要获取本地资源操作权限，也给用户带来不安全的隐患。HTML5的强大功能可在油田数据化时代给用户带来一种全新的应用方式及一种新颖的用户体验。在HTML5平台上，图像、音频、视频、动画与客户端的各种交互过程都被标准化。HTML5在页面上直接支持矢量数据的处理能力,并且有增加和本地数据存储等各种新的特性。其中全新的Canvas绘图元素就是专门为了客户端绘制矢量图形而设计的，它可以实现无插件的矢量数据绘制与渲染，无需客户端安装专有的插件，为摆脱第三方插件实现矢量数据的可视化提供了技术基础。为构建矢量化、跨平台跨浏览器的油田管道拓扑图绘制服务提供了一种方便快捷的解决思路。本文针对结合HTML5的Canvas的多种绘制路径，矩形，圆形，字符以及图像处理的特性，采用了Canvas依托动态数据绘制油田管道拓扑图的开发流程，对基于的矢量油田管道拓扑图服务及相关应用进行了深入的研究，并通过原型的实现证明了该方法的实用性和可行性。

1 HTML5相关技术

1.1 HTML5

HTML5这个版本的超文本标识语言是最新的主要修订版本，目前正处于发展尖端，他的目标是取代之前所制定的标准，并且包含了许多新的特征，并对之前的一些旧的特征尤其是基于脚本的API做了大量的更新[1]，其目的是为了减少浏览器对于需要插件才能运行富网络应用(RIA)的依赖性，并提供更多能有效增强网络应用的标准集。

HTML5增加了许多新的元素，如〈video〉,〈audio〉,〈canvas〉等[2]，同时整合了SVG内容。这些元素的添加是为了更容易和方便地在网页中添加和处理多媒体和图片内容，而〈canvas〉标签的使用将可以为管道拓扑图绘制提供更快和更新的实现方法。

1.2 Canvas

Canvas 是HTML5引入的一个新元素，该元素表示一个在页面上即时渲染的位图区域，其可以通过Javascript对其内容进行操控[3]。所谓即时渲染，意思是Canvas标签是通过操控像素来对屏幕上内容进行显示的。通过其提供的API，HTML5 Canvas会在每一帧完全重绘画布区域的内容。对于开发者来说，所要做的工作就是在每一帧绘制之前，准备好显示的内容，从而让页面元素达到开发者预想的效果。

这点让HTML5 Canvas与Flash技术，Sliverlight技术或SVG技术区别开来，后者采用的是保留模式[3]。在这种模式中，图像的显示效果是由图像渲染器决定的，开发者只能通过修改元素的属性来调整相关的显示(例如，横坐标，竖坐标，背景透明度等等)虽然这样可以让开发者远离底层操作，专注于上层逻辑，但是另一方面，弱化了对画布的可操作性，并不一定能得到预期的效果。

基本的HTML5Canvas API包含了对2D模型的各种操作，开发者可以通过该API在画布上显示各种形状，渲染文字，又或者直接将一幅图片显示在页面的画布上[4]。开发者可以自行操作其颜色，对其进行旋转，调整色彩透明度，也可以绘制各种直线，曲线，盒子模型，填充色等等。

就起自身而言，HTML5 Canvas 2D对象提供了一些2D元素操控API，让开发者能够在像素级别进行操控图形[5]，并且输入想要的结果。单独使用Canvas 技术并不能创建复杂的应用程序，但是配合跨浏览器技术，键盘和鼠标事件响应，定时器，对象，声音，数学函数等，那么开发者就能够充分利HTML提供的新技术创建出令人惊叹的应用程序。

2 管道拓扑图绘制过程

2.1 画布设置

Canvas绘图元素以〈canvas〉标签的形式出现，对应着一个矩形区域画布。画布的大小可以通过width和height属性来调整。例如油田管道拓扑图绘制系统中，定义一个1366*768的画布，只需在HTML文档中加入如下代码即可。

〈canvas width="1366" height="768" id="canvas"〉

除了用于展示的画布以外，为了实现对绘制好的图像进行拖拽、放大、缩小等功能，需要定义一个scene(场景)用于承载画布，然后通过完成对scene的拖拽和缩放来实现上述功能[6]，实例化scene代码如下：

var scene = new JTopo.Scene();

stage.add(scene);

值得一提的是，为了保证绘制图形的比例与实际场景的比例大致相同，也就是对原场景或样图的比例及相对位置保证一个高的还原度，我们需要人为的规定画布的大小，来保证画布的横纵比，从而使绘制出的图像不会出现变形等情况，横纵比公式如下[7]：

画布宽度W=

2.2 动态数据矢量化

油田管道坐标数据存放在后台的数据库中，由于各大油田都有自己的一套数据采集、管理系统，所以油田管道的原始坐标数据的来源各不相同，可能是卫星获取的相对于地球的坐标信息，也可能是以某管道起点为原点相对坐标信息，如何对坐标数据进行处理以适应于画布的大小，最终给用户一个直观全面的展示是本系统中的一个难点。

首先，我们需要确定整个画布的最大长度和宽度；然后寻找原始数据中的最大值与最小值，最后通过以下公式将原始数据转化成相对坐标[8]：

2.3 前后台数据传送

整个动态数据的矢量过程都是在程序的后台完成，而HTML5则完全应用于前台。主流的传参主要用一下几种方法[9]：

(1) 在前台读写数据库；

(2) session/cookie；

(3) 写在ajax里面作为URL param或者POST body传参；

HTML5完善的前台数据处理机制，使我们可以在前台连接数据库，尽管可以有效的减轻后台服务器的压力的同时，却造成了暴露数据库连接代码的危险，所以并不能作为商业开发的最佳选择，而常用的session也会因为对于进程的依赖性以及浏览器端对cookie的限制而不能达到理想的传参效果。

最终本系统采用了ajax的方法，通过作为URL param或者POSTbody的方法进行传参。首先，在程序的后台通过Array()数据的形式存储矢量化的数据[10]，而后在前台通过javascript脚本语言定义同名的数据，最终使用Respone.Write()函数将矢量化后的动态数据以URL 的形式传递到前台[11]。最终实现了拓扑图的精确绘制。

2.4 图像绘制

完成了图像绘制所需要的坐标参数的计算、传输后，可以进行基本图元的绘制，最终通过循环语句完成拓扑图的绘制。

油田管道拓扑图主要由管道节点及管道组成，在拓扑图中，管道节点以点的形式存在，具体代码如下：

var node_name1 =jdmc[i];

var node = newJTopo.CircleNode(node_name1);//定义节点名称

node.fillStyle = '200,255,0'/节点颜色填充

node.radius = 3;//定义节点半径node.setLocation(x[i], y[i]);//定义节点坐标

node.layout = { type: 'circle', radius: 3 };//节点实例化

scene.add(node);//添加到场景中

代码分对节点的字体信息、形状、半径、颜色等进行描述。在完成了基本图形的绘制后，通过scene.add()函数完成在场景中的绘制[12]，最终通过画布展示给用户。

节点绘制结束后，通过Line()函数完成节点之间的连线，最终通过循环函数，完成全部节点的绘制及连线。

var link = new JTopo.Link(node, zdnode); // 连线

link.strokeColor = '0,0,0';//定义线条颜色

link.lineWidth = 0.5;//定义线条宽度

scene.add(link);//在scene中绘制线条

2.5 程序效果展示

通过综上所述技术点，灵活运用HTML5的Canvas画布功能，结合油田管道数据的分析，实现了油田管道拓扑图像的绘制,如图1所示。

图1 油田管道拓扑图

除了正常的拓扑图绘制外，还增加了工具栏菜单，主要功能是可针对已绘制的拓扑图进行放大缩小等辅助功能，缩小功能代码如下：

$('#zoomCheckbox').click(function(){

if($'#zoomCheckbox').attr('checked')){

stage.wheelZoom = 0.85; // 设置鼠标缩放比例

}else{

stage.wheelZoom = null; // 取消鼠标缩放比例

}

});

主要是通过javascript代码来获取鼠标对工具栏按钮的操作来调整整个包含已绘制图像的容器的大小，最终完成对拓扑图的放大或缩小功能。

3 总结

随着对Web应用的需求越来越高，传统的B/S应用程序和基于第三方插件的Web应用开发，越来越不能应付复杂的Web图形和用户界面的需求。新生的HTML5技术，提供了丰富的多媒体应用功能，极大的减少了传统Web应用对插件的依赖。HTML5的Canvas技术，彻底改变了传统的Web图形图像处理技术，它只需要一个简单的页面元素，通过调用其内置的图形绘制函数和像素级的处理功能，就能完成以前复杂的图形图像处理功能。

本文通过使用HTML5中的Canvas标签，介绍如何利用Canvas和JavaScript脚本在Web页面上获取后台传输的捕获的油田管道相对地球坐标的动态数据进行绘图。通过Canvas标签绘制的图像，不仅无需第三方插件，同时还可以保存成图片，此外可以节约带宽，减少服务器绘制图像的负担，依靠客户端机器本身的性能进行绘图，同时解决了如Flash等第三方插件不能在服务器端认证和不能共享浏览器的会话状态等问题，因此其强大的生命力，将势必引起新一轮Web应用开发技术的革新。

[1] 余飞.基于HTML5的图形图像协同处理技术研究与实现[D].长江大学, 2015,(6).

[2] 刘华星，杨庚,等.HTML5——下一代Web开发标准研究[J].计算机技术与发展，2011,(8):54.

[3] 杨帆.基于HTML5的图形化网页数据展示[J].无线互联科技，2013,(7):42-43.

[4] 徐卓揆.基于HTML5、Ajax和WebService的WebGIS研究[J].测绘科学，2012,(1):145-147.

[5] 李烨民.基于HTML5的前端本地化存储技术[J].成都大学学报，2012,(1):67-69.

[6] 胡晶.HTML5中Canvas与Flash的应用研究[J].办公自动化，2014,(5):195.

[7] 徐莎，杨帆，徐昌庆.基于HTML5的WebGIS的研究与应用[J].信息技术，2015,(13):149-151.

[8] 戴松，许冉，周忠.基于HTML5的算法动画可视化平台[J].系统仿真学报，2013,(10):2436-2448.

[9] 周辉，程陈，任海军,等.基于HTML5的全景图展示[J].微型机与应用，2012,(20):73-79,86.

[10] 王淑庆，韩勇，张小垒,等.基于HTML5的时空轨迹动态可视化方法[J].北京交通大学学报，2015,(12):3318-3323.

[11] Tu Min, Zhu Yi-bing. Application and Research of HTML5 Representing future WEB Developed Standard. Proceedings of 2011 3rd IEEE International Conference on Information Management and Engineering(ICIME 2011)，2011.

[12] Jingming XIE.HTML5 Visual Composition of REST-like Web Services[C]. 2013 IEEE 4th International Conference on Software Engineering and Service Science，2013.

ResearchonOilfieldMixedPipelineTopologyDynamicMapBasedonHTML5

Liu Xianmei， Zhang Xiqiang, Zhao Ya
(Northeast Petroleum University, Daqing 163318)

With the need of oil field production and the rapid development of the Internet technology, oilfield pipeline topology graph appears at the moment.The requeirments of users on the use of the oil field pipeline topologygraph and interaction experience become increasingly higher, the traditional topology graphdrawingingtechnology connot meet the needs of users.HTML5 can solve the problems about Web vector network topology graph based on plug-in technology which needs to download and install, but it is hard to cross-platform, cross-browser， unsafe. Its information analysis and interaction ability exit obvious shortcomings and other issues. This paper achieves drawing oilfield pipeline topology graph dynamically by using the new attributes Canvasand the graphic image processing function of HTML5.

HTML5; Canvas; OilfiedpiPeline; Drawing topology graph

黑龙江省教育科学规划重点课题(GJB1215019)的阶段研究成果。

刘贤梅(1968-)，女，教授，硕士生导师，中国计算机学会高级会员(E200007945S)，研究领域：虚拟现实、三维可视化等.

张锡强(1992-)，男，辽宁省，硕士研究生，研究方向：虚拟现实方向.

1007-757X(2017)11-0027-03

2016.12.10)