基于Hybrid App的矢量切片數(shù)據(jù)快速顯示研究

文/馮威丁

基于Hybrid App的矢量切片數(shù)據(jù)快速顯示研究

文/馮威丁

矢量格式數(shù)據(jù)是地理信息的重要存儲(chǔ)方式，隨著移動(dòng)端GIS應(yīng)用的不斷擴(kuò)展，矢量數(shù)據(jù)在移動(dòng)端快速顯示成為移動(dòng)GIS研究的關(guān)鍵技術(shù)之一。本文通過(guò)探索基于Hybrid App的新型架構(gòu)，引入矢量切片思想，實(shí)現(xiàn)了移動(dòng)端地理矢量數(shù)據(jù)的快速顯示，結(jié)果表明，該方法能夠有效提高用戶(hù)體驗(yàn)。

Hybrid App 矢量切片 移動(dòng)GIS

1 引言

隨著技術(shù)的發(fā)展，移動(dòng)終端的數(shù)量指數(shù)型增長(zhǎng)，移動(dòng)端地理應(yīng)用成為用戶(hù)獲取地理相關(guān)信息的主要渠道之一。相比柵格數(shù)據(jù)，矢量數(shù)據(jù)具有顯示靈活，交互性強(qiáng)，樣式多樣，數(shù)據(jù)量小等優(yōu)勢(shì)，同時(shí)也存在自身的弱項(xiàng)：需要較高技術(shù)門(mén)檻，對(duì)硬件、軟件要求嚴(yán)格。對(duì)于移動(dòng)端有限的硬件配置，以往基于PC端的矢量數(shù)據(jù)顯示技術(shù)已無(wú)法滿足要求。我們有必要研究一種新型的矢量數(shù)據(jù)顯示技術(shù)，既能滿足用戶(hù)需求，又能減少對(duì)硬件的依賴(lài)。

為更好地實(shí)現(xiàn)移動(dòng)端適量地理數(shù)據(jù)的快速顯示，本文采用Hybrid APP架構(gòu)，基于Html5新規(guī)范，引入矢量切片思想，研發(fā)了一種新型的矢量數(shù)據(jù)在移動(dòng)端的快速加載及顯示技術(shù)，實(shí)踐表明該方法能夠極大地提高用戶(hù)的交互體驗(yàn)。

2 關(guān)鍵技術(shù)

2.1 矢量切片顯示技術(shù)

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

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

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

圖1：矢量切片實(shí)現(xiàn)技術(shù)路線

圖2：靜態(tài)矢量數(shù)據(jù)組織文件結(jié)構(gòu)

本研究中的靜態(tài)矢量數(shù)據(jù)采用文件結(jié)構(gòu)存儲(chǔ)于本地，文件組織結(jié)構(gòu)如下圖，每個(gè)切片則以GEOJSON格式進(jìn)行存儲(chǔ)，如圖2所示。

將平均含水率為32.53%的物料按照試驗(yàn)設(shè)置的薄層厚度平鋪在托盤(pán)上；當(dāng)DHG-9240A型熱風(fēng)干燥試驗(yàn)裝置中的溫度和風(fēng)速達(dá)到恒定時(shí)，將托盤(pán)放置于干燥室中；在干燥過(guò)程中定時(shí)測(cè)定物料的含水率，并觀察其變化情況。參照國(guó)家小麥籽粒入庫(kù)儲(chǔ)藏標(biāo)準(zhǔn)，將干燥最終干基含水率確定在11.5%～12.5%的范圍內(nèi)。每個(gè)處理重復(fù)進(jìn)行3次, 取其平均值。

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

2.2 Hybrid App移動(dòng)研發(fā)架構(gòu)

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

2.3 HTML5 canvas矢量繪制技術(shù)

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

3 數(shù)據(jù)組織

在設(shè)計(jì)匹配網(wǎng)絡(luò)之前，根據(jù)頻率間隔和功率大小，做好設(shè)計(jì)規(guī)劃工作，共塔頻率之間的頻率比原理上不得小于1.1，實(shí)際上最好不要小于1.5，否則很難做到理想的匹配網(wǎng)絡(luò)。一個(gè)理想的天調(diào)網(wǎng)路應(yīng)具備穩(wěn)定性和可靠性，匹配狀態(tài)良好，駐波比小于1.1，帶寬足夠大。

本研究采用由上海市測(cè)繪院生產(chǎn)的2013年度上海市建筑物矢量數(shù)據(jù)，該數(shù)據(jù)以oracle spatial方式存儲(chǔ)在數(shù)據(jù)庫(kù)中，詳細(xì)記錄了上海市的建筑物面狀信息，具有數(shù)據(jù)量大，數(shù)據(jù)結(jié)構(gòu)復(fù)雜等特點(diǎn)，傳統(tǒng)的移動(dòng)端矢量數(shù)據(jù)顯示技術(shù)存在數(shù)據(jù)加載慢，顯示效果卡頓現(xiàn)象明顯等問(wèn)題。本研究中的動(dòng)態(tài)矢量切片顯示技術(shù)的數(shù)據(jù)源即為存儲(chǔ)oracle數(shù)據(jù)庫(kù)的上海市建筑物矢量數(shù)據(jù)。

本文對(duì)于不同的矢量切片實(shí)現(xiàn)思路分別搭建了不同的后端服務(wù)，其中靜態(tài)矢量切片技術(shù)由于無(wú)需其他復(fù)雜參數(shù)，搭建了無(wú)狀態(tài)的REST服務(wù)，而對(duì)于動(dòng)態(tài)矢量切片由于需要傳遞空間范圍等復(fù)雜參數(shù)，搭建soap服務(wù)，方便傳參和快速訪問(wèn)數(shù)據(jù)庫(kù)。

4 系統(tǒng)實(shí)現(xiàn)

Canvas是HTML5新增的一個(gè)專(zhuān)門(mén)用于繪制矢量圖形的重要元素，實(shí)現(xiàn)了無(wú)插件的瀏覽器端矢量圖形的快速繪制和顯示，用戶(hù)可通過(guò)Javascript對(duì)其內(nèi)容進(jìn)行操控，實(shí)現(xiàn)操控像素來(lái)對(duì)屏幕上內(nèi)容進(jìn)行實(shí)時(shí)顯示。

Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于web-app和native-app兩者之間的app，兼具“Native App良好用戶(hù)交互體驗(yàn)的優(yōu)勢(shì)”和“Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì)”。該種研發(fā)模式能夠充分利用web端最新的圖形繪制等新技術(shù)，如HTML5 canvas圖形繪制，ajax等。

表 1：矢量切片加載速率測(cè)試結(jié)果

圖3：矢量切片顯示效果

本研究研發(fā)了一個(gè)移動(dòng)端的矢量數(shù)據(jù)瀏覽app應(yīng)用，實(shí)現(xiàn)了移動(dòng)端快速顯示矢量數(shù)據(jù)，并且在地圖操作中保證了矢量數(shù)據(jù)加載的流暢性。具體效果如圖3，其中（a）是靜態(tài)矢量切片顯示技術(shù)效果，（b）是動(dòng)態(tài)矢量切片顯示效果圖。

矢量數(shù)據(jù)具有自定義樣式的優(yōu)勢(shì)，可根據(jù)不同需求對(duì)同一份數(shù)據(jù)進(jìn)行樣式設(shè)置，效果如圖3（a）和（b），對(duì)于同樣的上海市建筑物矢量數(shù)據(jù)，我們?cè)O(shè)置了不同的顏色填充，此外，系統(tǒng)還實(shí)現(xiàn)了矢量數(shù)據(jù)的屬性查詢(xún)功能見(jiàn)圖3（c），為用戶(hù)提供了更加豐富的信息，提高了用戶(hù)的交互性。

同時(shí)，本研究利用chrome瀏覽器對(duì)上海市建筑物矢量切片數(shù)據(jù)的顯示過(guò)程進(jìn)行監(jiān)測(cè)統(tǒng)計(jì)，結(jié)果如表1，從表1中可以看出，矢量切片的加載速度在秒級(jí)到百毫秒級(jí)間變化，能夠很好地滿足移動(dòng)端的矢量數(shù)據(jù)加載顯示需求，也具有很好的用戶(hù)體驗(yàn)。

5 結(jié)論

本文基于Hybrid APP架構(gòu)，利用HTML5 Canvas技術(shù)，引入矢量切片思想和Ajax技術(shù)，制作了上海市建筑物矢量切片數(shù)據(jù)庫(kù)，并搭建矢量切片地圖訪問(wèn)的Rest服務(wù)，實(shí)現(xiàn)了上海市建筑物矢量數(shù)據(jù)在移動(dòng)端的快速顯示，提高了矢量地圖在客戶(hù)端的加載效率，增強(qiáng)了客戶(hù)端的用戶(hù)體驗(yàn)。同時(shí)，本文仍存在一些不足之處，比如，本文只針對(duì)面狀矢量數(shù)據(jù)進(jìn)行了實(shí)驗(yàn)，以后應(yīng)對(duì)點(diǎn)、線矢量數(shù)據(jù)作進(jìn)一步實(shí)驗(yàn)；本文在制作上海市建筑物矢量切片數(shù)據(jù)時(shí)沒(méi)有對(duì)超出切片邊界的數(shù)據(jù)進(jìn)行處理，在數(shù)據(jù)存儲(chǔ)時(shí)仍存在一定的冗余，以后可以進(jìn)一步考慮對(duì)數(shù)據(jù)進(jìn)行優(yōu)化處理；本文實(shí)現(xiàn)了面狀矢量切片數(shù)據(jù)的加載和顯示，以后還可以進(jìn)一步深入研究，在顯示的基礎(chǔ)上實(shí)現(xiàn)對(duì)點(diǎn)、線、面的編輯功能，提供更好的WebGIS應(yīng)用。

[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的矢量電子海圖服務(wù)研究[M].大連海事大學(xué)碩士學(xué)位論文,2013.

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

作者單位 上海市測(cè)繪院 上海市 200063

馮威丁（1989-）男，助理工程師，科研開(kāi)發(fā)員。現(xiàn)就職于上海市測(cè)繪院基礎(chǔ)地理信息中心，主要從事于GIS前沿技術(shù)的研究和探索、GIS在不同行業(yè)的應(yīng)用和發(fā)展。