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

褚永彬 儲(chǔ) 奎 舒 珺 萬善余 卞玉霞

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

0 引 言

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

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

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

燃?xì)夤芫W(wǎng)即時(shí)測繪成圖系統(tǒng)的設(shè)計(jì)目的是實(shí)現(xiàn)GPS位置獲取、自動(dòng)成圖和拓?fù)渚庉?。功能著重于?shù)據(jù)采集和自動(dòng)成圖，包括：添加設(shè)備點(diǎn)、手動(dòng)/自動(dòng)添加線段節(jié)點(diǎn)、屬性錄入、拓?fù)渚庉?、屬性編輯。?jì)算所占用的比例比較低，不屬于重型應(yīng)用，所以系統(tǒng)采用重客戶端、輕服務(wù)端的思路設(shè)計(jì)架構(gòu)?？蛻舳瞬扇「豢蛻舳碎_發(fā)技術(shù)，使用JavaScript、HTML5、CSS3作為基礎(chǔ)技術(shù)手段。為了能夠快速、高效的開發(fā)，使用React框架作為整體的技術(shù)選型?？蛻舳苏w架構(gòu)包括數(shù)據(jù)結(jié)構(gòu)、UI層、開發(fā)庫、GIS地圖庫和功能模塊，開發(fā)設(shè)計(jì)上采用SPA(單頁面應(yīng)用程序)，以組件式模塊化開發(fā)，組件與組件之間耦合度較低，數(shù)據(jù)通信以數(shù)據(jù)驅(qū)動(dòng)式開發(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ù)器。在客戶端中，按照功能可以劃分為三個(gè)模塊，分別是GPS位置獲取模塊、自動(dòng)成圖模塊和拓?fù)渚庉嬆K。GPS位置獲取模塊為自動(dòng)成圖模塊提供位置數(shù)據(jù)，自動(dòng)成圖模塊根據(jù)數(shù)據(jù)完成自動(dòng)成圖。當(dāng)用戶需要編輯管網(wǎng)時(shí)，就會(huì)調(diào)用拓?fù)渚庉嬆K，該模塊支持用戶進(jìn)行拓?fù)渚庉?，最終在自動(dòng)成圖模塊中實(shí)時(shí)展示編輯效果。REST API 服務(wù)器主要工作是提供數(shù)據(jù)服務(wù)。用戶需要對數(shù)據(jù)庫中數(shù)據(jù)進(jìn)行增刪改查操作時(shí)，則需要調(diào)用REST API服務(wù)器，從而間接地將數(shù)據(jù)存儲(chǔ)到MongoDB數(shù)據(jù)庫中。靜態(tài)文件服務(wù)器是提供靜態(tài)文件服務(wù)，客戶端在初次訪問系統(tǒng)時(shí)，需要將系統(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è)計(jì)

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

燃?xì)夤芫W(wǎng)沒有固定的方向，而是隨著氣壓的變化，燃?xì)獾牧飨蛱幱陔S時(shí)變化中。系統(tǒng)主要是對節(jié)點(diǎn)進(jìn)行操作，但同時(shí)也需要獲得節(jié)點(diǎn)的鄰接關(guān)系，故采用無向圖鄰接表來為拓?fù)浣Y(jié)構(gòu)數(shù)據(jù)存儲(chǔ)。無向圖鄰接表用一個(gè)一維數(shù)組或者單鏈表來存儲(chǔ)頂點(diǎn)信息，不過一般使用數(shù)組能夠比較方便地讀取頂點(diǎn)的信息。

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

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

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

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

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

頂點(diǎn)屬性數(shù)據(jù)按照邊表存儲(chǔ)屬性數(shù)據(jù)的模式也是可以的，但是為了盡量保證數(shù)據(jù)單一職責(zé)，頂點(diǎn)數(shù)據(jù)只保留關(guān)鍵數(shù)據(jù)(地理位置和頂點(diǎn)類型)，在系統(tǒng)數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)上把屬性數(shù)據(jù)做了分離，頂點(diǎn)屬性數(shù)據(jù)單獨(dú)存儲(chǔ)在一個(gè)數(shù)組中。為了方便，屬性數(shù)據(jù)數(shù)組索引和頂點(diǎn)數(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ù)庫實(shí)現(xiàn)

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

圖3 頂點(diǎn)表存儲(chǔ)結(jié)構(gòu)

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

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

3 系統(tǒng)功能

燃?xì)夤芫W(wǎng)即時(shí)測繪成圖系統(tǒng)的功能包括：添加設(shè)備點(diǎn)、手動(dòng)/自動(dòng)添加線段節(jié)點(diǎn)、屬性錄入、拓?fù)渚庉?、屬性編輯。本文以添加設(shè)備點(diǎn)和拓?fù)渚庉嫗槔榻B系統(tǒng)功能實(shí)現(xiàn)。

3.1 添加設(shè)備點(diǎn)

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

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

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

3.2 拓?fù)渚庉?/h3>

拓?fù)渚庉嬜顬殛P(guān)鍵，也最為復(fù)雜。拓?fù)渚庉嫻δ苤沃鴶?shù)據(jù)的修改。拓?fù)渚庉嫹譃閮刹糠?，一是?jié)點(diǎn)的編輯，二是節(jié)點(diǎn)的刪除操作。

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

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

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

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

圖7 拓?fù)渚庉?/p>

圖8 拓?fù)鋭h除

4 結(jié) 語

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