城市管网WebGIS客户端的设计与开发

屈欣宇，侯英姿，王方雄

（1.辽宁师范大学辽宁省自然地理与空间信息科学重点实验室，辽宁大连116029；2.辽宁师范大学城市与环境学院，辽宁大连116029）

城市管网WebGIS客户端的设计与开发

屈欣宇，侯英姿*，王方雄

（1.辽宁师范大学辽宁省自然地理与空间信息科学重点实验室，辽宁大连116029；2.辽宁师范大学城市与环境学院，辽宁大连116029）

针对城市管网管理复杂的问题，提出一种基于WebGIS的城市管网系统解决方案。城市管网WebGIS客户端采用HTML5/CSS3设计并优化布局功能界面，JavaScript语言进行管网WebGIS客户端界面的设计与实现，依赖SuperMapiClient组件包开发实现管网浏览、管网信息查询、爆管分析、连通分析等GIS功能。系统运行结果表明，建设基于WebGIS的城市管网信息系统为城市管网安全有效和高质量的运作提供了重要保障。

城市管网WebGIS；HTML5/CSS3；JavaScript；SupermapiClient

引言

城市管网是现代社会中一个重要的基础设施，它的安全运行保障了城市有效和高质量的运作[1]。本文基于SuperMapiServer和SuperMapiClient探索城市管网WebGIS客户端的结构设计、界面开发和功能开发的方法，研究城市管网浏览、管网信息查询、爆管分析、连通分析等主要功能的开发技术，对管道数据的管理和对管线网络的安全运行以及事故发生时的有效应对具有重要意义[2]。

1 客户端设计

客户端采用HTML5定义界面元素，CSS3完成界面元素样式和大小方位的调整，应用JavaScript语言实现界面的弹窗、翻页、滑动效果等，调用SuperMapiClient的JavaScript组件接口开发实现管网浏览、信息查询、爆管分析、连通分析等功能。

1.1 功能设计

城市管网WebGIS客户端提供管网浏览、信息查询、爆管分析、连通分析等功能模块，具体设计如图1。管网爆管分析模块包括爆管分析和关阀影响。爆管时，基于管线网络数据，由爆管分析功能查找应关闭的阀门，分析受影响管段。管网浏览模块包括缩放平移、全幅显示、比例尺、鹰眼和图层控制等基本GIS功能。管网信息查询模块包括空间查询和属性查询。管网连通分析包括连通分析、上下游追踪和共同上下游。连通分析可查询管点间管网的连通性。上游追踪可迅速列出目标管段到气源的路径，下游追踪可列出全部的影响范围。两个位置同时检测到气体被污染时，共同上下游可查找两个目标点共同的燃气上游和下游。

1.2 界面设计

界面设计包括主界面和功能界面设计。主界面由信息栏、搜索列表、地图窗口、功能列表等组成。地图窗口显示影像图、DEM、地上地下管网、阀门、楼房等基础数据。主界面使用＜header〉、＜arcticle〉、＜nav〉等html5新增标签创建页面结构，＜div〉、＜span〉定义各个图层，使用列表标签＜ul〉、＜li〉，表单标签＜input〉、＜button〉等丰富页面内容。功能界面有信息过滤、属性查询、地物详情、统计分析等。

2 客户端功能实现

城市管网WebGIS客户端的主要功能采用JavaScript语言，基于SuperMapiClient进行开发。爆管分析和连通分析功能都是采用BFS算法作为算法基础，扩展实现的管网分析功能[3]。

2.1 管网浏览

调用SuperMap.Map地图类和Layer图层类实现地图加载。调用Map接口的addControl方法添加比例尺、鹰眼等控件。

2.2 管网信息查询

调用QueryBySQLService接口新建构造函数，QueryBySQLParameters设置属性查询的相关参数，调用QueryEventArgs、QueryResult类获取查询结果。

2.3 管网爆管分析

调用FilterParameter设置过滤参数，选择爆管点，FacilityAnalystUpstream3DService搜索爆管位置上游最近阀门及该阀门下游管段的ID数组，爆管点最邻近的上游阀门为要关闭的阀门。

图1 系统功能模块设计

图2 连通分析功能界面

调用FacilityAnalystTracedown3DService接口追踪爆管下游设施，分析关闭阀门后会受影响的下游管道。

2.4 管网连通分析

连通分析功能是判断管点间管网的连通性，通过BFS算法搜索每个管点是否为目标点来判断燃气管网的管点之间是否连通，并标识出连通的路径[4]。根据流向和字段SmTNode、SmFNode、Direction的关系建立管网节点的邻接矩阵，使用二维数组array进行记录。调用BufferAnalystService接口搜索目标两点周围半径为0.5m圆内的管段，根据管段信息获取管段之间相连通的所有顶点的SmID，调用QueryParameters定义SQL语句，查询这些顶点组成的管段SmID。分析结果如图2所示。在连通分析的基础上可衍生出上下游追踪和共同上下游功能。

3 结束语

城市管网Web GIS采用的四层B/S结构由客户端、Web服务器、应用服务器和数据库服务器构成。客户端界面使用HTML5、CSS3构建页面元素及样式，JavaScript语言调用SuperMapiClient丰富的功能接口与界面控件，实现了管网浏览、信息查询、爆管分析、连通分析等功能，介绍了主要功能实现的关键技术和部分功能实现效果图。管网WebGIS将进一步设计开发更多专业GIS功能，使城市管网WebGIS在信息服务及工作管理上更方便有效。

[1]应克明.基于GIS技术的燃气管网地理信息系统的设计与开发[D].上海：上海交通大学，2006.

[2]王方雄，李晶莹，张翔.城市管网WebGIS的爆管分析技术[J].国土与自然资源研究，2016（3）：81-82.

[3]张翔，王方雄，崔羽.城市三维管网地理信息系统的设计与开发[J].测绘地理信息，2015，40（2）：17-19.

[4]刘子恒，侯英姿，王方雄，张翔.管网3DGIS的连通分析方法与实现[J].微型机与应用，2016，35（9）：78-84.

Design and Development of
city PipeWebGIS Client

QU Xin-yu et al
(1.Liaoning Key Lab of Physical Geography and Geomatics, Liaoning Normal University,Liaoning Dalian 116029,China; 2.School of Urban and Environmental Sciences,Liaoning Normal University,Liaoning Dalian 116029,China)

To deal with the problem of management of city pipe network,this paper puts forward City Pipe Network WebGIS to solve the problem.City Pipe Network WebGIS client uses HTML5 and CSS3 to design,optimize and lay out function pages,uses JavaScript to design and develop client pages,the realization of pipe network browsing,information queries of pipe network,pipe burst analysis,connectivity analysis and other GIS functions is based on SuperMapiClient component packages.The results show that developing the city pipe network information system that based on WebGIS provides important guarantee forsafe,efficient and high-qualityoperation of the city pipe network.

Citypipe network webgis;HTML5/CSS3; JavaScript;SuperMapiClient

TP311

A

屈欣宇（1993-），女，辽宁大石桥人，硕士研究生，主要从事WebGIS研究与开发。

侯英姿（1974-），女，黑龙江大庆人，博士，讲师，主要从事GIS建模与技术应用研究。

（2016-09-26收稿S编辑）

1003-7853（2016）05-0042-02