袁 通, 陳 強(qiáng), 周 玲
(上海工程技術(shù)大學(xué) 電子電氣工程學(xué)院, 上海 201600)
城市地下管網(wǎng)是城市的重要基礎(chǔ)設(shè)施和組成部分,是維持現(xiàn)代化城市正常運(yùn)作的命脈[1]。隨著城市的建設(shè)發(fā)展,越來越多地下管網(wǎng)的投入使用帶來了大量的管網(wǎng)信息數(shù)據(jù)。目前國(guó)內(nèi)常用的軟件平臺(tái)多為基于企業(yè)級(jí)WEBGIS平臺(tái)開發(fā),典型的就是ArcGIS的Server平臺(tái)[2],ArcGIS系列軟件本身具有強(qiáng)大的模型分析與計(jì)算功能等優(yōu)點(diǎn),但軟件存在平臺(tái)搭建復(fù)雜、項(xiàng)目周期長(zhǎng)、費(fèi)用及維護(hù)成本高等問題。對(duì)于區(qū)域范圍內(nèi)的小型空間信息系統(tǒng)項(xiàng)目,百度地圖API避免了上述問題的存在,提供了合適的解決方案。本文基于百度地圖API的原始地圖資源,將百度地圖內(nèi)嵌到信息系統(tǒng)當(dāng)中,采用免費(fèi)提供的API進(jìn)行二次開發(fā)。利用百度地圖提供的JavaScript API技術(shù)創(chuàng)建基于B/S模式的城市地下管網(wǎng)信息系統(tǒng),該系統(tǒng)既能方便測(cè)繪人員和維護(hù)人員結(jié)合電子地圖直觀、迅速的掌握地下管網(wǎng)的地理信息,又能給地下管網(wǎng)的管理者和規(guī)劃者提供準(zhǔn)確而又詳盡的數(shù)據(jù)信息。
本文在功能設(shè)計(jì)前進(jìn)行了實(shí)地考察,以校企合作企業(yè)上海置誠(chéng)城市管網(wǎng)工程技術(shù)股份有限公司為考察對(duì)象深入了解工程施工及管理過程中的需求,本次系統(tǒng)設(shè)計(jì)所需管網(wǎng)數(shù)據(jù)均由置誠(chéng)公司提供。針對(duì)考察過程中發(fā)現(xiàn)的實(shí)際需求與問題,本文設(shè)計(jì)了一種基于B/S模式下的功能解決方案,經(jīng)過論證該方案可滿足置誠(chéng)公司在項(xiàng)目中的需求。主要功能包括:新建項(xiàng)目、施工設(shè)計(jì)、屬性編輯、回拖力計(jì)算、二維視圖、導(dǎo)出WebGIS等。系統(tǒng)基本功能框架如圖1所示。
圖1 基本功能框架圖
本文Web端管網(wǎng)信息管理系統(tǒng)是基于B/S架構(gòu),客戶層則采用HTML5、 CSS3和JavaScript語(yǔ)言對(duì)于Web UI進(jìn)行設(shè)計(jì)開發(fā)[3]。在客戶端用戶可通過Web瀏覽器對(duì)系統(tǒng)進(jìn)行訪問,使用ASP.Net WebAPIs構(gòu)建REST服務(wù),RESTfuIservice是一種輕量級(jí)的Web服務(wù)的架構(gòu)模式。服務(wù)器端由BaiduMap服務(wù)器和數(shù)據(jù)庫(kù)服務(wù)器組成,BaiduMap服務(wù)器通過BaiduMap APIs向Web客戶端提供服務(wù),數(shù)據(jù)庫(kù)服務(wù)器通過DB Service APIs與客戶端進(jìn)行信息交互,BaiduMap服務(wù)器根據(jù)定位API將數(shù)據(jù)傳輸給數(shù)據(jù)庫(kù)服務(wù)器。系統(tǒng)結(jié)構(gòu)設(shè)計(jì)如圖2所示。
圖2 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)圖
本文通過HTMLS+CSS3+JavaScript對(duì)系統(tǒng)界面進(jìn)行設(shè)計(jì),包括登錄界面、功能欄和地圖窗口。功能界面包括新建項(xiàng)目、查看項(xiàng)目、屬性編輯、查看二維三維圖、導(dǎo)出WebGIS等。地圖窗口顯示管網(wǎng)圖、影像圖、路況信息等基礎(chǔ)數(shù)據(jù)。利用HTML5的
、 、圖3 系統(tǒng)主界面
Application Programming Inter-face簡(jiǎn)稱為API,即應(yīng)用程序接口。百度地圖JavaScript API是一套由JavaScript語(yǔ)言編寫的應(yīng)用程序接口,可以實(shí)現(xiàn)在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用,支持PC端和移動(dòng)端基于瀏覽器的地圖應(yīng)用開發(fā),且支持HTML5特性的地圖開發(fā)[5]。用戶可以運(yùn)用JavaScript語(yǔ)言將百度地圖所提供的服務(wù)加載到自己的開發(fā)平臺(tái)中,從而能夠根據(jù)自身需求實(shí)現(xiàn)地點(diǎn)檢索、導(dǎo)航定位、出行方案等地圖應(yīng)用功能。此外,將平臺(tái)和地理信息數(shù)據(jù)通過地圖服務(wù)應(yīng)用接口進(jìn)行綁定,可以把復(fù)雜的GIS底層邏輯進(jìn)行封裝,再直觀且免費(fèi)的提供給用戶,降低了地理信息系統(tǒng)在地圖服務(wù)和開發(fā)上的應(yīng)用難度。百度地圖API自2010年開放以來,在團(tuán)購(gòu)、電子商務(wù)、車聯(lián)網(wǎng)等方面都得到了長(zhǎng)足的發(fā)展,同時(shí)也帶動(dòng)了地理信息系統(tǒng)的發(fā)展[6]。傳統(tǒng)意義上的數(shù)據(jù)庫(kù)信息系統(tǒng)已經(jīng)不能滿足人們的需求,而電子地圖與數(shù)據(jù)庫(kù)的結(jié)合越來越多地投入到實(shí)際應(yīng)用中。
JQuery是一種以“寫的少,做的多”為目的輕量級(jí)JavaScript框架,jQuery不僅很大程度上簡(jiǎn)化了JavaScript編程,也為Web前端頁(yè)面設(shè)計(jì)提供了插件集合。該框架的主要功能模塊有:基礎(chǔ)jQuery EasyUI是基于jQuery框架的用戶界面( Base)模塊、布局(Layout)模塊、菜單與按鈕(Menuand Button)模塊、表單(Form)模塊、窗體(Window)模塊、數(shù)據(jù)網(wǎng)格(Datagrid )、樹形(Tree)模塊以及擴(kuò)展(Extension )模塊[7]。每個(gè)功能模塊都提供了多種組件,每個(gè)組件實(shí)現(xiàn)某種特定功能。EasyUI工具有以下優(yōu)點(diǎn):代碼簡(jiǎn)潔而功能強(qiáng)大、動(dòng)態(tài)數(shù)據(jù)交互安全可靠、完美支持HTMLS、節(jié)省網(wǎng)頁(yè)開發(fā)時(shí)間和規(guī)模。
MySQL是一個(gè)小型的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng),把數(shù)據(jù)存儲(chǔ)在表格中,使用標(biāo)準(zhǔn)的結(jié)構(gòu)化查詢語(yǔ)言sql訪問數(shù)據(jù)庫(kù)。MySQL的調(diào)試、管理、優(yōu)化更為簡(jiǎn)單。因此本文選用MySQL作為后臺(tái)數(shù)據(jù)庫(kù)管理系統(tǒng),并結(jié)合Navicat可視化工具,實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的管理和開發(fā)。Navicat使用圖形化的用戶界面,可以讓用戶使用和管理更為輕松[8]。
創(chuàng)建頁(yè)面地圖需要引入百度地圖API,通過以下幾個(gè)步驟來實(shí)現(xiàn)。
5.1.1 密鑰的獲取
為了統(tǒng)一平臺(tái)服務(wù)的配額管理,JavaScript API在新版本引入ak機(jī)制。JavaScript API v1.4及以前版本無須申請(qǐng)密鑰(ak),自v1.5版本開始需要先申請(qǐng)密鑰(ak),才可成功加載API JS文件。ak的使用方法如下:
5.1.2 準(zhǔn)備頁(yè)面
添加一個(gè)meta標(biāo)簽,以便使頁(yè)面更好地在移動(dòng)平臺(tái)上展示:
設(shè)置樣式,使地圖充滿整個(gè)瀏覽器窗口:
body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:538px;}
#r-result{width:100%;}
p{margin-left:5px; font-size:14px;}
創(chuàng)建地圖容器,元素地圖需要一個(gè)HTML元素作為容器,這樣才能展現(xiàn)到頁(yè)面上。在此創(chuàng)建了一個(gè)div元素。命名空間 API使用BMap作為命名空間,所有類均在該命名空間之下,比如:BMap.Map、BMap.Control、BMap.Overlay。
5.1.3 搜索功能的添加
在地圖瀏覽頁(yè)面的左上角添加搜索功能框,用來實(shí)現(xiàn)管網(wǎng)位置的查詢??伤阉鲀?nèi)容包括管網(wǎng)名稱、管網(wǎng)類型、坐標(biāo)、街道名稱等。
5.1.4 瀏覽功能的添加
本系統(tǒng)的地圖瀏覽功能包括地圖的平移、縮放、比例尺和地圖類型展示,其中地圖類型展示又包括全景圖和衛(wèi)星圖。通過添加以下控件來實(shí)現(xiàn)這些功能。
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("上海");//設(shè)置當(dāng)前位置為上海
var stCtrl = new BMap.PanoramaControl(); //構(gòu)造全景控件
stCtrl.setOffset(new BMap.Size(40, 40));
map.addControl(stCtrl);//添加全景控件
至此地圖瀏覽界面創(chuàng)建完成,界面如圖4所示。
管網(wǎng)信息主要包括管網(wǎng)軌跡和井點(diǎn)數(shù)據(jù),通過百度地圖的折線繪制功能將管網(wǎng)軌跡呈現(xiàn)在地圖上,對(duì)每個(gè)井點(diǎn)進(jìn)行標(biāo)注并添加數(shù)據(jù)信息。本文以上海市茸悅路移動(dòng)管網(wǎng)為例,通過以下過程完成系統(tǒng)的搭建。
圖4 地圖瀏覽界面
5.2.1 管網(wǎng)軌跡的生成
百度地圖API的折線繪制功能是通過兩個(gè)坐標(biāo)點(diǎn)的經(jīng)緯度坐標(biāo)來實(shí)現(xiàn)的,百度對(duì)外接口的坐標(biāo)系為BD09坐標(biāo)系,并不是真實(shí)經(jīng)緯度,在使用百度地圖JavaScript API服務(wù)前,需先將非百度坐標(biāo)通過坐標(biāo)轉(zhuǎn)換接口轉(zhuǎn)換成百度坐標(biāo)。坐標(biāo)轉(zhuǎn)換完成后引入覆蓋物polyline表示地圖上的折線。
var polyline = new BMap.Polyline([
new BMap.Point(121.2527800011,31.0619999999)],
{strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5} );
map.addOverlay(polyline);
將所有井點(diǎn)轉(zhuǎn)換后的經(jīng)緯度坐標(biāo)依次引入便可生成管網(wǎng)軌跡,如圖5所示。
圖5 管線軌跡圖
5.2.2 管網(wǎng)井點(diǎn)的標(biāo)注
管網(wǎng)軌跡的每個(gè)折點(diǎn)都表示一個(gè)井點(diǎn),為了更明顯地表示需要對(duì)井點(diǎn)進(jìn)行標(biāo)注。標(biāo)注時(shí)引入覆蓋物Marker標(biāo)注表示地圖上的點(diǎn),可自定義標(biāo)注的圖標(biāo)。
Var point = new BMap.Point(121.2527800011,31.0619999999);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
將所有井點(diǎn)轉(zhuǎn)換后的經(jīng)緯度坐標(biāo)依次引入便可實(shí)現(xiàn)對(duì)井點(diǎn)的標(biāo)注,如圖6所示。
圖6 標(biāo)注后的管線圖
5.2.3 添加井點(diǎn)信息窗口
每個(gè)井點(diǎn)都包含了井號(hào)、坐標(biāo)、管線標(biāo)高/埋深、井蓋/地面高程這五種信息,在每個(gè)井點(diǎn)標(biāo)注上添加信息窗口將數(shù)據(jù)信息直觀地體現(xiàn)出來。此時(shí)需引入一種特殊的覆蓋物InfoWindow,同一時(shí)刻只能有一個(gè)信息窗口在地圖上打開。引入過程如下:
Var data_info = [[121.2527800011,31.0619999999,"井號(hào):既有信息井(單位:m)橫坐標(biāo)(Y): -21510.754
縱坐標(biāo)(X): -19591.441
管線標(biāo)高:4.056
井蓋/地面高程:4.556
管線埋深:0.5
"]將所有轉(zhuǎn)換后的井點(diǎn)坐標(biāo)和數(shù)據(jù)信息依次引入,即可完成井點(diǎn)信息窗口的添加工作。打開的信息窗口如圖7所示。
圖7 信息窗口展示圖
地下管網(wǎng)是一個(gè)龐大的數(shù)據(jù)庫(kù),建立完整的數(shù)據(jù)庫(kù)首先需要搜集完善的管網(wǎng)數(shù)據(jù),然后再對(duì)得到的管網(wǎng)數(shù)據(jù)按照上文所述的步驟依次錄入系統(tǒng)。其中管網(wǎng)名稱、管網(wǎng)類型、管網(wǎng)經(jīng)緯度坐標(biāo)和街道名稱都保存在后臺(tái)數(shù)據(jù)庫(kù)中,通過對(duì)前臺(tái)的WebGIS進(jìn)行開發(fā),可以實(shí)現(xiàn)后臺(tái)讀取數(shù)據(jù)庫(kù)的數(shù)據(jù),進(jìn)而生成后臺(tái)數(shù)組,這些數(shù)組可用來供前臺(tái)JS調(diào)用[9]。后臺(tái)數(shù)據(jù)庫(kù)管理模塊最終可以實(shí)現(xiàn)以下功能:管理員登錄、后臺(tái)管理主頁(yè)面下的新建項(xiàng)目、管網(wǎng)屬性編輯、查看項(xiàng)目信息、導(dǎo)入現(xiàn)場(chǎng)施工數(shù)據(jù)、導(dǎo)出WebGIS等。
本文基于百度地圖API,以上海置誠(chéng)城市管網(wǎng)工程技術(shù)股份有限公司提供的上海市松江區(qū)茸悅路的移動(dòng)管網(wǎng)數(shù)據(jù)信息為例,展示了系統(tǒng)設(shè)計(jì)和功能實(shí)現(xiàn)過程。從地圖的視角將原本不可視的地下管網(wǎng)軌跡呈現(xiàn)出來,并且詳盡的管網(wǎng)信息也可通過電子地圖信息窗口的形式展示出來,實(shí)現(xiàn)了管網(wǎng)信息的可視化。該系統(tǒng)不僅滿足了用戶對(duì)于電子地圖的基本操作,同時(shí)可以實(shí)現(xiàn)管線數(shù)據(jù)采集、數(shù)據(jù)導(dǎo)入、導(dǎo)出等功能,界面友好簡(jiǎn)潔直觀,便于操作。通過對(duì)系統(tǒng)數(shù)據(jù)庫(kù)的不斷完善,本系統(tǒng)將在地下管網(wǎng)的測(cè)量和管理工作中發(fā)揮更大的價(jià)值。