基于Leaflet的跨平臺管線數據采集解決方法

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

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

0 引 言

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

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

1 總體設計與架構

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

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

圖1 系統架構

2 數據結構及數據庫

2.1 數據結構設計

為了跨平臺的需要，系統并沒有接入任何GIS地圖服務器，僅僅使用了Leaflet作為基礎地圖服務，不具有拓撲結構，所以需要用算法去實現，而數據結構也是本系統的關鍵技術。

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

2.2 數據庫設計

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

表1 數據庫文檔

2.3 數據結構實現

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

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

通過上述方法所建立的數據結構保存在“GasNetwork”類中， GasNetwork結構如圖2所示。

圖2 GasNetwork結構

2.4 數據庫實現

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

圖3 頂點表存儲結構

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

圖4 邊表存儲結構

3 系統功能

燃氣管網即時測繪成圖系統的功能包括：添加設備點、手動/自動添加線段節點、屬性錄入、拓撲編輯、屬性編輯。本文以添加設備點和拓撲編輯為例介紹系統功能實現。

3.1 添加設備點

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

圖5 添加設備點屬性

圖6 添加設備點成功

3.2 拓撲編輯

拓撲編輯最為關鍵，也最為復雜。拓撲編輯功能支撐著數據的修改。拓撲編輯分為兩部分，一是節點的編輯，二是節點的刪除操作。

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

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

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

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

圖7 拓撲編輯

圖8 拓撲刪除

4 結 語

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