屈欣宇，侯英姿，王方雄

（1.遼寧師范大學(xué)遼寧省自然地理與空間信息科學(xué)重點實驗室，遼寧大連116029；2.遼寧師范大學(xué)城市與環(huán)境學(xué)院，遼寧大連116029）

城市管網(wǎng)WebGIS客戶端的設(shè)計與開發(fā)

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

（1.遼寧師范大學(xué)遼寧省自然地理與空間信息科學(xué)重點實驗室，遼寧大連116029；2.遼寧師范大學(xué)城市與環(huán)境學(xué)院，遼寧大連116029）

針對城市管網(wǎng)管理復(fù)雜的問題，提出一種基于WebGIS的城市管網(wǎng)系統(tǒng)解決方案。城市管網(wǎng)WebGIS客戶端采用HTML5/CSS3設(shè)計并優(yōu)化布局功能界面，JavaScript語言進行管網(wǎng)WebGIS客戶端界面的設(shè)計與實現(xiàn)，依賴SuperMapiClient組件包開發(fā)實現(xiàn)管網(wǎng)瀏覽、管網(wǎng)信息查詢、爆管分析、連通分析等GIS功能。系統(tǒng)運行結(jié)果表明，建設(shè)基于WebGIS的城市管網(wǎng)信息系統(tǒng)為城市管網(wǎng)安全有效和高質(zhì)量的運作提供了重要保障。

城市管網(wǎng)WebGIS；HTML5/CSS3；JavaScript；SupermapiClient

引言

城市管網(wǎng)是現(xiàn)代社會中一個重要的基礎(chǔ)設(shè)施，它的安全運行保障了城市有效和高質(zhì)量的運作[1]。本文基于SuperMapiServer和SuperMapiClient探索城市管網(wǎng)WebGIS客戶端的結(jié)構(gòu)設(shè)計、界面開發(fā)和功能開發(fā)的方法，研究城市管網(wǎng)瀏覽、管網(wǎng)信息查詢、爆管分析、連通分析等主要功能的開發(fā)技術(shù)，對管道數(shù)據(jù)的管理和對管線網(wǎng)絡(luò)的安全運行以及事故發(fā)生時的有效應(yīng)對具有重要意義[2]。

1 客戶端設(shè)計

客戶端采用HTML5定義界面元素，CSS3完成界面元素樣式和大小方位的調(diào)整，應(yīng)用JavaScript語言實現(xiàn)界面的彈窗、翻頁、滑動效果等，調(diào)用SuperMapiClient的JavaScript組件接口開發(fā)實現(xiàn)管網(wǎng)瀏覽、信息查詢、爆管分析、連通分析等功能。

1.1 功能設(shè)計

城市管網(wǎng)WebGIS客戶端提供管網(wǎng)瀏覽、信息查詢、爆管分析、連通分析等功能模塊，具體設(shè)計如圖1。管網(wǎng)爆管分析模塊包括爆管分析和關(guān)閥影響。爆管時，基于管線網(wǎng)絡(luò)數(shù)據(jù)，由爆管分析功能查找應(yīng)關(guān)閉的閥門，分析受影響管段。管網(wǎng)瀏覽模塊包括縮放平移、全幅顯示、比例尺、鷹眼和圖層控制等基本GIS功能。管網(wǎng)信息查詢模塊包括空間查詢和屬性查詢。管網(wǎng)連通分析包括連通分析、上下游追蹤和共同上下游。連通分析可查詢管點間管網(wǎng)的連通性。上游追蹤可迅速列出目標管段到氣源的路徑，下游追蹤可列出全部的影響范圍。兩個位置同時檢測到氣體被污染時，共同上下游可查找兩個目標點共同的燃氣上游和下游。

1.2 界面設(shè)計

界面設(shè)計包括主界面和功能界面設(shè)計。主界面由信息欄、搜索列表、地圖窗口、功能列表等組成。地圖窗口顯示影像圖、DEM、地上地下管網(wǎng)、閥門、樓房等基礎(chǔ)數(shù)據(jù)。主界面使用＜header〉、＜arcticle〉、＜nav〉等html5新增標簽創(chuàng)建頁面結(jié)構(gòu)，＜div〉、＜span〉定義各個圖層，使用列表標簽＜ul〉、＜li〉，表單標簽＜input〉、＜button〉等豐富頁面內(nèi)容。功能界面有信息過濾、屬性查詢、地物詳情、統(tǒng)計分析等。

2 客戶端功能實現(xiàn)

城市管網(wǎng)WebGIS客戶端的主要功能采用JavaScript語言，基于SuperMapiClient進行開發(fā)。爆管分析和連通分析功能都是采用BFS算法作為算法基礎(chǔ)，擴展實現(xiàn)的管網(wǎng)分析功能[3]。

2.1 管網(wǎng)瀏覽

調(diào)用SuperMap.Map地圖類和Layer圖層類實現(xiàn)地圖加載。調(diào)用Map接口的addControl方法添加比例尺、鷹眼等控件。

2.2 管網(wǎng)信息查詢

調(diào)用QueryBySQLService接口新建構(gòu)造函數(shù)，QueryBySQLParameters設(shè)置屬性查詢的相關(guān)參數(shù)，調(diào)用QueryEventArgs、QueryResult類獲取查詢結(jié)果。

2.3 管網(wǎng)爆管分析

調(diào)用FilterParameter設(shè)置過濾參數(shù)，選擇爆管點，F(xiàn)acilityAnalystUpstream3DService搜索爆管位置上游最近閥門及該閥門下游管段的ID數(shù)組，爆管點最鄰近的上游閥門為要關(guān)閉的閥門。

圖1 系統(tǒng)功能模塊設(shè)計

圖2 連通分析功能界面

調(diào)用FacilityAnalystTracedown3DService接口追蹤爆管下游設(shè)施，分析關(guān)閉閥門后會受影響的下游管道。

2.4 管網(wǎng)連通分析

連通分析功能是判斷管點間管網(wǎng)的連通性，通過BFS算法搜索每個管點是否為目標點來判斷燃氣管網(wǎng)的管點之間是否連通，并標識出連通的路徑[4]。根據(jù)流向和字段SmTNode、SmFNode、Direction的關(guān)系建立管網(wǎng)節(jié)點的鄰接矩陣，使用二維數(shù)組array進行記錄。調(diào)用BufferAnalystService接口搜索目標兩點周圍半徑為0.5m圓內(nèi)的管段，根據(jù)管段信息獲取管段之間相連通的所有頂點的SmID，調(diào)用QueryParameters定義SQL語句，查詢這些頂點組成的管段SmID。分析結(jié)果如圖2所示。在連通分析的基礎(chǔ)上可衍生出上下游追蹤和共同上下游功能。

3 結(jié)束語

城市管網(wǎng)Web GIS采用的四層B/S結(jié)構(gòu)由客戶端、Web服務(wù)器、應(yīng)用服務(wù)器和數(shù)據(jù)庫服務(wù)器構(gòu)成?？蛻舳私缑媸褂肏TML5、CSS3構(gòu)建頁面元素及樣式，JavaScript語言調(diào)用SuperMapiClient豐富的功能接口與界面控件，實現(xiàn)了管網(wǎng)瀏覽、信息查詢、爆管分析、連通分析等功能，介紹了主要功能實現(xiàn)的關(guān)鍵技術(shù)和部分功能實現(xiàn)效果圖。管網(wǎng)WebGIS將進一步設(shè)計開發(fā)更多專業(yè)GIS功能，使城市管網(wǎng)WebGIS在信息服務(wù)及工作管理上更方便有效。

[1]應(yīng)克明.基于GIS技術(shù)的燃氣管網(wǎng)地理信息系統(tǒng)的設(shè)計與開發(fā)[D].上海：上海交通大學(xué)，2006.

[2]王方雄，李晶瑩，張翔.城市管網(wǎng)WebGIS的爆管分析技術(shù)[J].國土與自然資源研究，2016（3）：81-82.

[3]張翔，王方雄，崔羽.城市三維管網(wǎng)地理信息系統(tǒng)的設(shè)計與開發(fā)[J].測繪地理信息，2015，40（2）：17-19.

[4]劉子恒，侯英姿，王方雄，張翔.管網(wǎng)3DGIS的連通分析方法與實現(xiàn)[J].微型機與應(yīng)用，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研究與開發(fā)。

侯英姿（1974-），女，黑龍江大慶人，博士，講師，主要從事GIS建模與技術(shù)應(yīng)用研究。

（2016-09-26收稿S編輯）

1003-7853（2016）05-0042-02