基于Hybrid App的矢量切片數據快速顯示研究

文/馮威丁

基于Hybrid App的矢量切片數據快速顯示研究

文/馮威丁

矢量格式數據是地理信息的重要存儲方式，隨著移動端GIS應用的不斷擴展，矢量數據在移動端快速顯示成為移動GIS研究的關鍵技術之一。本文通過探索基于Hybrid App的新型架構，引入矢量切片思想，實現了移動端地理矢量數據的快速顯示，結果表明，該方法能夠有效提高用戶體驗。

Hybrid App 矢量切片 移動GIS

1 引言

隨著技術的發展，移動終端的數量指數型增長，移動端地理應用成為用戶獲取地理相關信息的主要渠道之一。相比柵格數據，矢量數據具有顯示靈活，交互性強，樣式多樣，數據量小等優勢，同時也存在自身的弱項：需要較高技術門檻，對硬件、軟件要求嚴格。對于移動端有限的硬件配置，以往基于PC端的矢量數據顯示技術已無法滿足要求。我們有必要研究一種新型的矢量數據顯示技術，既能滿足用戶需求，又能減少對硬件的依賴。

為更好地實現移動端適量地理數據的快速顯示，本文采用Hybrid APP架構，基于Html5新規范，引入矢量切片思想，研發了一種新型的矢量數據在移動端的快速加載及顯示技術，實踐表明該方法能夠極大地提高用戶的交互體驗。

2 關鍵技術

2.1 矢量切片顯示技術

矢量切片顯示技術是一種利用新技術來控制動態的可交互的地圖展示方式，可以在移動端或者瀏覽器中自定義個性化的地圖樣式。通俗的講，就是將矢量數據以建立金字塔的方式，向柵格切片那樣分割成一個個的小文件，以GeoJson格式等自定義格式組織，然后在web前端根據需要請求不同的矢量切片數據基于HTML5規范進行Web繪圖。該技術具有體積小、更新快、自定義樣式、快速顯示、效率高等特點。

本文基于矢量切片思想探索了靜態矢量切片顯示技術和動態矢量切片顯示技術兩種思路。這兩種技術的前端均采用HTML5 canvas，Ajax技術實現矢量數據的快速繪制和顯示，主要區別是對于矢量切片的計算和獲取方式不同，靜態矢量切片技術預先已制作完成不同級別的矢量切片，并建立索引，針對前端的訪問請求，只需根據索引查找對應切片文件并返回即可，適用于離線方式加載矢量數據；而動態矢量切片技術則根據前端請求，實時計算相應的切片信息，并根據計算結果訪問數據庫，實時制作矢量切片文件，然后返回前端，本方法適用于在線訪問矢量數據，如圖1所示。

1.2 觀察指標及檢測方法 患者均接受VADT化療6個周期，治療前后檢測并比較貧血組和無貧血組、骨病組和無骨病組的Dickkopf-1水平。檢測方法：稀釋患者空腹血清和骨髓上清液，采用雙抗體夾心酶標免疫分析法，通過ELX-800酶標儀檢測，檢測波長為450 nm。

圖1：矢量切片實現技術路線

圖2：靜態矢量數據組織文件結構

本研究中的靜態矢量數據采用文件結構存儲于本地，文件組織結構如下圖，每個切片則以GEOJSON格式進行存儲，如圖2所示。

將平均含水率為32.53%的物料按照試驗設置的薄層厚度平鋪在托盤上；當DHG-9240A型熱風干燥試驗裝置中的溫度和風速達到恒定時，將托盤放置于干燥室中；在干燥過程中定時測定物料的含水率，并觀察其變化情況。參照國家小麥籽粒入庫儲藏標準，將干燥最終干基含水率確定在11.5%～12.5%的范圍內。每個處理重復進行3次, 取其平均值。

住院方面，低收入與中低收入組因住院就醫而產生高于其他收入人群的經濟風險(矯正RR值大于1)，住院就醫風險度隨著患者收入水平的提高而減少。

2.2 Hybrid App移動研發架構

總有人喜歡津津樂道于張無忌和妹子們的感情生活，甚至對張無忌究竟選誰而爭論不休，然而這未免太小瞧了趙敏。她所得到的，靠的不是好運，更不是誰的施舍，是她選擇了張無忌，所以一路走到了最后。無論張無忌心里放的是誰，那都是張無忌的故事，而趙敏永遠是那個自由的趙敏，毫不畏懼，勇敢向前。

2.3 HTML5 canvas矢量繪制技術

本研究選用“web技術（HTML5+CSS+JS）+ AppCan + jQuery Mobile”的技術思路搭建Android系統的矢量數據顯示平臺，地圖的操作和顯示將采用開源的lea fl et JS庫。

3 數據組織

在設計匹配網絡之前，根據頻率間隔和功率大小，做好設計規劃工作，共塔頻率之間的頻率比原理上不得小于1.1，實際上最好不要小于1.5，否則很難做到理想的匹配網絡。一個理想的天調網路應具備穩定性和可靠性，匹配狀態良好，駐波比小于1.1，帶寬足夠大。

本研究采用由上海市測繪院生產的2013年度上海市建筑物矢量數據，該數據以oracle spatial方式存儲在數據庫中，詳細記錄了上海市的建筑物面狀信息，具有數據量大，數據結構復雜等特點，傳統的移動端矢量數據顯示技術存在數據加載慢，顯示效果卡頓現象明顯等問題。本研究中的動態矢量切片顯示技術的數據源即為存儲oracle數據庫的上海市建筑物矢量數據。

本文對于不同的矢量切片實現思路分別搭建了不同的后端服務，其中靜態矢量切片技術由于無需其他復雜參數，搭建了無狀態的REST服務，而對于動態矢量切片由于需要傳遞空間范圍等復雜參數，搭建soap服務，方便傳參和快速訪問數據庫。

4 系統實現

Canvas是HTML5新增的一個專門用于繪制矢量圖形的重要元素，實現了無插件的瀏覽器端矢量圖形的快速繪制和顯示，用戶可通過Javascript對其內容進行操控，實現操控像素來對屏幕上內容進行實時顯示。

Hybrid App（混合模式移動應用）是指介于web-app和native-app兩者之間的app，兼具“Native App良好用戶交互體驗的優勢”和“Web App跨平臺開發的優勢”。該種研發模式能夠充分利用web端最新的圖形繪制等新技術，如HTML5 canvas圖形繪制，ajax等。

表 1：矢量切片加載速率測試結果

圖3：矢量切片顯示效果

本研究研發了一個移動端的矢量數據瀏覽app應用，實現了移動端快速顯示矢量數據，并且在地圖操作中保證了矢量數據加載的流暢性。具體效果如圖3，其中（a）是靜態矢量切片顯示技術效果，（b）是動態矢量切片顯示效果圖。

矢量數據具有自定義樣式的優勢，可根據不同需求對同一份數據進行樣式設置，效果如圖3（a）和（b），對于同樣的上海市建筑物矢量數據，我們設置了不同的顏色填充，此外，系統還實現了矢量數據的屬性查詢功能見圖3（c），為用戶提供了更加豐富的信息，提高了用戶的交互性。

同時，本研究利用chrome瀏覽器對上海市建筑物矢量切片數據的顯示過程進行監測統計，結果如表1，從表1中可以看出，矢量切片的加載速度在秒級到百毫秒級間變化，能夠很好地滿足移動端的矢量數據加載顯示需求，也具有很好的用戶體驗。

5 結論

本文基于Hybrid APP架構，利用HTML5 Canvas技術，引入矢量切片思想和Ajax技術，制作了上海市建筑物矢量切片數據庫，并搭建矢量切片地圖訪問的Rest服務，實現了上海市建筑物矢量數據在移動端的快速顯示，提高了矢量地圖在客戶端的加載效率，增強了客戶端的用戶體驗。同時，本文仍存在一些不足之處，比如，本文只針對面狀矢量數據進行了實驗，以后應對點、線矢量數據作進一步實驗；本文在制作上海市建筑物矢量切片數據時沒有對超出切片邊界的數據進行處理，在數據存儲時仍存在一定的冗余，以后可以進一步考慮對數據進行優化處理；本文實現了面狀矢量切片數據的加載和顯示，以后還可以進一步深入研究，在顯示的基礎上實現對點、線、面的編輯功能，提供更好的WebGIS應用。

[1]Antoniou V,Morley J,Haklay M. Tiled vectors：A method for vector transmission over the web[C].Proc of Web and Wireless Geographical Information Systems,2009：56-71.

[2]HTML5 Is a W3C Recommendation[EB/ OL].http：//www.w3.org/blog/news/ archives/4167：2014,10,28.

[3]Leafle.Leaflet[EB/Ol].[2014-09-23]. http：//leafletjs.com/index.html.

[4]閔東龍.基于HTML5的矢量電子海圖服務研究[M].大連海事大學碩士學位論文,2013.

[5]孫璐,陳犖,劉露,蘇德國.一種面向服務器制圖可視化的矢量數據多尺度組織方法[J].計算機工程與科學,2014,36(02)：226-232.

作者單位 上海市測繪院 上海市 200063

馮威丁（1989-）男，助理工程師，科研開發員?，F就職于上海市測繪院基礎地理信息中心，主要從事于GIS前沿技術的研究和探索、GIS在不同行業的應用和發展。