基于Leaflet的跨平臺管線數(shù)據(jù)采集解決方法

褚永彬 儲 奎 舒 珺 萬善余 卞玉霞

1(成都信息工程大學資源環(huán)境學院 四川 成都 610225)2(成都知道創(chuàng)宇信息技術(shù)有限公司 四川 成都 610094)3(武漢工程科技學院信息工程學院 湖北 武漢 430200)4(上海平可行智能科技有限公司 上海 200235)

0 引 言

移動互聯(lián)網(wǎng)和GIS的發(fā)展，促進了基于移動GIS技術(shù)的信息采集系統(tǒng)的應(yīng)用[1-11]。在管線探測方面，周京春等[3]應(yīng)用移動GIS技術(shù)，采用PDA作為移動終端，研究和探索城市管線探測過程中從外業(yè)探查、管線測量、內(nèi)業(yè)數(shù)據(jù)檢查處理到成果輸出入庫、修補更新的一體化作業(yè)管理模式。但這種模式已經(jīng)不能滿足移動智能終端普及化和多樣化的現(xiàn)實需求。胡達天等[12]基于輕量級開源Leaflet軟件，設(shè)計并實現(xiàn)了跨平臺地圖發(fā)布，較好地解決了跨平臺地圖服務(wù)的無縫信息流轉(zhuǎn)問題，成為使用Leaflet進行跨平臺應(yīng)用開發(fā)的成功案例。

為適應(yīng)移動終端的多樣化，滿足管線快速測量實時自動成圖的需要，本文提出一種面向跨平臺應(yīng)用的基于移動GIS的燃氣管網(wǎng)實時成圖技術(shù)，實現(xiàn)管線的快速繪制并自動建立網(wǎng)絡(luò)連通關(guān)系，便于繪圖人員戶外操作使用。

1 總體設(shè)計與架構(gòu)

燃氣管網(wǎng)即時測繪成圖系統(tǒng)的設(shè)計目的是實現(xiàn)GPS位置獲取、自動成圖和拓撲編輯。功能著重于數(shù)據(jù)采集和自動成圖，包括：添加設(shè)備點、手動/自動添加線段節(jié)點、屬性錄入、拓撲編輯、屬性編輯。計算所占用的比例比較低，不屬于重型應(yīng)用，所以系統(tǒng)采用重客戶端、輕服務(wù)端的思路設(shè)計架構(gòu)。客戶端采取富客戶端開發(fā)技術(shù)，使用JavaScript、HTML5、CSS3作為基礎(chǔ)技術(shù)手段。為了能夠快速、高效的開發(fā)，使用React框架作為整體的技術(shù)選型。客戶端整體架構(gòu)包括數(shù)據(jù)結(jié)構(gòu)、UI層、開發(fā)庫、GIS地圖庫和功能模塊，開發(fā)設(shè)計上采用SPA(單頁面應(yīng)用程序)，以組件式模塊化開發(fā)，組件與組件之間耦合度較低，數(shù)據(jù)通信以數(shù)據(jù)驅(qū)動式開發(fā)，整體上開發(fā)模式非常靈活、高效。服務(wù)器端使用了同構(gòu)技術(shù)，采用nodejs作為REST API服務(wù)器和靜態(tài)文件服務(wù)器。數(shù)據(jù)庫采用NoSQL中的MongoDB。

系統(tǒng)總體架構(gòu)如圖1所示。架構(gòu)分為三部分：客戶端、REST API和靜態(tài)文件服務(wù)器。在客戶端中，按照功能可以劃分為三個模塊，分別是GPS位置獲取模塊、自動成圖模塊和拓撲編輯模塊。GPS位置獲取模塊為自動成圖模塊提供位置數(shù)據(jù)，自動成圖模塊根據(jù)數(shù)據(jù)完成自動成圖。當用戶需要編輯管網(wǎng)時，就會調(diào)用拓撲編輯模塊，該模塊支持用戶進行拓撲編輯，最終在自動成圖模塊中實時展示編輯效果。REST API 服務(wù)器主要工作是提供數(shù)據(jù)服務(wù)。用戶需要對數(shù)據(jù)庫中數(shù)據(jù)進行增刪改查操作時，則需要調(diào)用REST API服務(wù)器，從而間接地將數(shù)據(jù)存儲到MongoDB數(shù)據(jù)庫中。靜態(tài)文件服務(wù)器是提供靜態(tài)文件服務(wù)，客戶端在初次訪問系統(tǒng)時，需要將系統(tǒng)文件下載到本地，才能提供系統(tǒng)服務(wù)。

圖1 系統(tǒng)架構(gòu)

2 數(shù)據(jù)結(jié)構(gòu)及數(shù)據(jù)庫

2.1 數(shù)據(jù)結(jié)構(gòu)設(shè)計

為了跨平臺的需要，系統(tǒng)并沒有接入任何GIS地圖服務(wù)器，僅僅使用了Leaflet作為基礎(chǔ)地圖服務(wù)，不具有拓撲結(jié)構(gòu)，所以需要用算法去實現(xiàn)，而數(shù)據(jù)結(jié)構(gòu)也是本系統(tǒng)的關(guān)鍵技術(shù)。

燃氣管網(wǎng)沒有固定的方向，而是隨著氣壓的變化，燃氣的流向處于隨時變化中。系統(tǒng)主要是對節(jié)點進行操作，但同時也需要獲得節(jié)點的鄰接關(guān)系，故采用無向圖鄰接表來為拓撲結(jié)構(gòu)數(shù)據(jù)存儲。無向圖鄰接表用一個一維數(shù)組或者單鏈表來存儲頂點信息，不過一般使用數(shù)組能夠比較方便地讀取頂點的信息。

2.2 數(shù)據(jù)庫設(shè)計

本系統(tǒng)中數(shù)據(jù)都是以集合的形式存儲。燃氣管網(wǎng)數(shù)據(jù)在級別上屬于海量數(shù)據(jù)，存儲的數(shù)據(jù)格式以及字段要求能夠支持拓展。針對系統(tǒng)的設(shè)計要求，MongoDB將數(shù)據(jù)存儲為一個文檔，數(shù)據(jù)結(jié)構(gòu)由鍵值對(key=>value)組成。這種模式相比MySQL來說更適合系統(tǒng)的設(shè)計要求。數(shù)據(jù)庫文檔設(shè)計如表1所示。

表1 數(shù)據(jù)庫文檔

2.3 數(shù)據(jù)結(jié)構(gòu)實現(xiàn)

由于本系統(tǒng)使用JavaScript語言開發(fā)，不能直接操作指針。為了能夠達到同等的效果，在構(gòu)建無向圖鄰接表時，利用數(shù)組具有天然索引的特征，采用關(guān)聯(lián)索引來達到模擬指針的效果，故而數(shù)據(jù)結(jié)構(gòu)的設(shè)計實現(xiàn)全部采用數(shù)組。頂點表用一個一維數(shù)組來實現(xiàn)，每個元素中用Object({type, location})來存儲頂點信息，其中：type表示節(jié)點類型；location存儲坐標信息。邊表用一個二維數(shù)組來實現(xiàn)，邊表和頂點之間的指針關(guān)系用數(shù)組索引來關(guān)聯(lián)，即頂點表中的索引和邊表的索引一致。每個頂點對應(yīng)的所有鄰接點存放在一個一維數(shù)組中，然后把這些一維數(shù)組再存放到這個邊表的二維數(shù)組中。為了方便操作點和邊的屬性，在邊表中的鄰接點數(shù)據(jù)結(jié)構(gòu)上增加了邊屬性數(shù)據(jù)。同樣鄰接點在數(shù)組單元中也是存儲為一個Object({adjvex, edgeAttributes})，其中：adjvex存儲頂點的索引，用于模擬單鏈表中的指針；edgeAttributes存儲該邊的屬性數(shù)據(jù)。

頂點屬性數(shù)據(jù)按照邊表存儲屬性數(shù)據(jù)的模式也是可以的，但是為了盡量保證數(shù)據(jù)單一職責，頂點數(shù)據(jù)只保留關(guān)鍵數(shù)據(jù)(地理位置和頂點類型)，在系統(tǒng)數(shù)據(jù)結(jié)構(gòu)設(shè)計上把屬性數(shù)據(jù)做了分離，頂點屬性數(shù)據(jù)單獨存儲在一個數(shù)組中。為了方便，屬性數(shù)據(jù)數(shù)組索引和頂點數(shù)據(jù)數(shù)組保持相互對應(yīng)。

通過上述方法所建立的數(shù)據(jù)結(jié)構(gòu)保存在“GasNetwork”類中， GasNetwork結(jié)構(gòu)如圖2所示。

圖2 GasNetwork結(jié)構(gòu)

2.4 數(shù)據(jù)庫實現(xiàn)

在MongoDB數(shù)據(jù)庫根據(jù)表1建立“data”集合。集合中文檔的vertexNodes和edgeNodes兩個字段格式有著嚴格的約定，頂點表子項詳細存儲結(jié)構(gòu)如圖3所示，其中：vertexNodes[i]表示vertexNodes下的子項，類型是object；location表示存儲的是頂點的坐標信息，類型是Array；location[0]存儲的是緯度坐標；location[1]存儲的是經(jīng)度坐標；type表示節(jié)點類型，0表示普通節(jié)點，1表示設(shè)備點。

圖3 頂點表存儲結(jié)構(gòu)

邊表子項詳細存儲結(jié)構(gòu)如圖4所示，edgeNodes[i]表示邊表中對應(yīng)著頂點表中相應(yīng)索引的邊表信息，類型是Array；edgeNodes[i][j]表示的是每一個鄰接點，類型是object；adjvex存儲的是頂點表中的索引，類型是Int；edgeAttributes存儲的是頂點和該鄰接點的邊屬性，該屬性可動態(tài)拓展，類型是object。

圖4 邊表存儲結(jié)構(gòu)

3 系統(tǒng)功能

燃氣管網(wǎng)即時測繪成圖系統(tǒng)的功能包括：添加設(shè)備點、手動/自動添加線段節(jié)點、屬性錄入、拓撲編輯、屬性編輯。本文以添加設(shè)備點和拓撲編輯為例介紹系統(tǒng)功能實現(xiàn)。

3.1 添加設(shè)備點

當點擊添加設(shè)備點功能，系統(tǒng)會彈出屬性框，供用戶輸入屬性，點擊確定后系統(tǒng)將會調(diào)用GPS位置模塊獲取位置數(shù)據(jù)。LBS位置服務(wù)由HTML5 navigator.geolocation. getCurrentPosition()方法提供，通過此方法可以獲取到當前位置信息。該方法成功獲取位置后將會調(diào)用回調(diào)函數(shù)。在回調(diào)函數(shù)中，繼續(xù)調(diào)用GasNetwork實例下的addDevicePoint和insertDeviceAttributes方法，完成數(shù)據(jù)添加工作，然后根據(jù)GasNetwork實例的_collection數(shù)據(jù)集進行成圖渲染，即調(diào)用自動成圖模塊。添加設(shè)備系統(tǒng)功能如圖5、圖6所示。

圖5 添加設(shè)備點屬性

圖6 添加設(shè)備點成功

3.2 拓撲編輯

拓撲編輯最為關(guān)鍵，也最為復(fù)雜。拓撲編輯功能支撐著數(shù)據(jù)的修改。拓撲編輯分為兩部分，一是節(jié)點的編輯，二是節(jié)點的刪除操作。

1) 節(jié)點編輯。點擊節(jié)點編輯，系統(tǒng)調(diào)用拓撲編輯節(jié)點編輯模塊，此時會調(diào)用自動成圖模塊，渲染出節(jié)點，該節(jié)點在Leaflet中稱為Marker，在Marker中添加move事件，用于監(jiān)聽節(jié)點移動事件。當節(jié)點被移動，該事件將會被觸發(fā)，返回最新的經(jīng)緯度信息，然后調(diào)用自動成圖模塊完成重繪工作。

2) 節(jié)點刪除。點擊節(jié)點刪除按鈕，系統(tǒng)調(diào)用拓撲編輯刪除模塊，繼而調(diào)用自動成圖模塊完成節(jié)點渲染，在Marker中添加click事件，用于監(jiān)聽點擊事件。當節(jié)點被點擊，觸發(fā)刪除操作，該節(jié)點將會從數(shù)據(jù)集合緩存中的頂點表和邊表中刪除，最后調(diào)用自動成圖模塊完成重繪工作。

數(shù)據(jù)集合緩存目的是為了能夠做撤銷工作，拓撲編輯還有兩個輔助功能，分別是保存和取消。保存按鈕用于保存用戶的編輯結(jié)果，取消按鈕用于取消編輯，還原至編輯之前的數(shù)據(jù)。用戶在點擊保存按鈕之前，操作的都是數(shù)據(jù)集合緩存數(shù)據(jù)，不會對真實數(shù)據(jù)造成干擾，只有當用戶點擊保存按鈕之后，真實的GasNetwork實例的_collection才會被修改。

圖7是編輯之后的結(jié)果，圖8是刪除了圖7中的部分節(jié)點的結(jié)果。

圖7 拓撲編輯

圖8 拓撲刪除

4 結(jié) 語

本文研究了野外測繪自動成圖與拓撲結(jié)構(gòu)構(gòu)建，開發(fā)了基于GIS的野外測繪自動成圖系統(tǒng)。拓撲結(jié)構(gòu)構(gòu)建是系統(tǒng)的關(guān)鍵，所有的操作都基于此。本文采用無向圖鄰接表作為拓撲結(jié)構(gòu)數(shù)據(jù)存儲。基于Leaflet開源JavaScript地圖庫完成了跨平臺的移動GIS開發(fā)。通過系統(tǒng)測試、數(shù)據(jù)分析驗證了拓撲結(jié)構(gòu)構(gòu)建的合理性與正確性，實現(xiàn)了系統(tǒng)設(shè)計的所有功能。系統(tǒng)整體上具有輕便性、可移植性、可拓展性、可跨平臺性、前后端完全分離等特點，為跨平臺的野外數(shù)據(jù)采集提供了一種可行的方案。