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