一種WebGIS瓦片數(shù)據(jù)更新方法研究

穆星 祝靜怡

摘 要：由于電子地圖的快速發(fā)展以及城市建設(shè)的加速，許多電子地圖的瓦片數(shù)據(jù)急需更新，為了能夠?qū)崟r(shí)的從客戶端更新瓦片數(shù)據(jù)，主要采用了WebGIS以及HTML、JavaScript的相關(guān)技術(shù)，通過(guò)對(duì)瓦片像素的讀取、修改和保存，來(lái)實(shí)現(xiàn)瓦片數(shù)據(jù)更新。實(shí)驗(yàn)結(jié)果表明可以通過(guò)該方法快速實(shí)時(shí)的更新數(shù)據(jù)，該方法使瓦片更新方式更加靈活不需要在服務(wù)器進(jìn)行維護(hù)，改變了以往數(shù)據(jù)更新需要全部重新切片的弊端。

關(guān)鍵詞：WebGIS；HTML5；JavaScript；瓦片數(shù)據(jù)；局部更新；像素讀取

中圖分類號(hào)：P208 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：2095-2945（2018）25-0152-03

Abstract： Due to the rapid development of electronic map and the acceleration of city construction， the tile data of many electronic maps need to be updated urgently. In order to update the tile data in real time from the client， we mainly use WebGIS， HTML， and JavaScript related technology. Through reading， modifying and saving the tile pixels， the tile data can be updated. The experimental results show that the method can update the data quickly in real time. This method makes the tile updating more flexible and does not need to be maintained in the server， which changes the disadvantages of the previous data updating which need to be completely re-sliced.

Keywords： WebGIS； HTML5； JavaScript； tile data； local updating； pixel reading

引言

隨著國(guó)內(nèi)各種數(shù)字城市的建成和使用，如何保持地理信息數(shù)據(jù)的現(xiàn)勢(shì)性以及如何更有效率的更新數(shù)據(jù)，成為現(xiàn)在電子地圖需要解決的核心問(wèn)題[1]。傳統(tǒng)的瓦片更新方式通常是在后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行更新。而從用戶提出地圖的修改工作到數(shù)據(jù)庫(kù)的修改，其中的環(huán)節(jié)太多，周期太長(zhǎng)[2]。傳統(tǒng)的更新方式是以瓦片為單位進(jìn)行的更新，而如果小塊區(qū)域的點(diǎn)位變化，僅僅是為了修改一個(gè)點(diǎn)，而采用這種更新方式，有點(diǎn)顯得費(fèi)時(shí)費(fèi)力。從本質(zhì)上說(shuō)，瓦片其實(shí)是一張圖片，它是由像素組成的。只要有需要更新的地圖的位置信息，就可以計(jì)算獲得需要更新的瓦片的行列號(hào)[3]。從而讀取該圖片的像素，經(jīng)過(guò)修改像素，就可以更新數(shù)據(jù)?；蛘呖梢愿鶕?jù)提供的最底層的瓦片數(shù)據(jù)，計(jì)算得到對(duì)應(yīng)的各個(gè)層級(jí)需要更新的對(duì)應(yīng)的瓦片的位置經(jīng)過(guò)像素的提取，重采樣，來(lái)得到新的瓦片，就可以對(duì)該瓦片進(jìn)行替換。從而解決瓦片更新的聯(lián)動(dòng)問(wèn)題，減少瓦片的輸出量，提高瓦片的更新效率[4]。

1 地圖瓦片更新方法

地圖瓦片更新的思路主要是，首先根據(jù)地圖的坐標(biāo)以及瓦片所在的層級(jí)信息，計(jì)算出地圖瓦片的行列號(hào)，并結(jié)合HTML的canvas工具，將圖片繪制在畫布中，通過(guò)context.getImageData（）；來(lái)獲得圖片的像素信息。通過(guò)對(duì)像素的遍歷和修改，實(shí)現(xiàn)指定行列位置處的瓦片更新。

1.1 底層瓦片的更新

首先計(jì)算瓦片的行列號(hào)，假設(shè)地圖切片的原點(diǎn)是（originX，originY），地圖的瓦片大小是tileSize，屏幕上1像素代表的實(shí)際距離是resolution。計(jì)算坐標(biāo)點(diǎn)（x，y）所在的瓦片的行列號(hào)的公式是[5]：

col=（originX-x）/（resolution*tileSize）；

row=（originY-y）/（resolution*tileSize）；

通過(guò)canvas對(duì)圖片的像素進(jìn)行讀取，一張256*256大小的圖片都是256*256個(gè)像素，每個(gè)像素都有r、g、b、a四個(gè)屬性。分別代表紅、綠、藍(lán)和透明度[6]。由于需要顯示待更新的數(shù)據(jù)，以及更新的數(shù)據(jù)，需要設(shè)計(jì)兩個(gè)canvas圖框。其中一個(gè)用來(lái)輸入更新的圖片，另一個(gè)用來(lái)傳入待更新的圖片。對(duì)于底層的更新，只需要把對(duì)應(yīng)的像素進(jìn)行替換。通過(guò)遍歷像素來(lái)修改圖片。

1.2 其它層瓦片的更新

各層瓦片之間的關(guān)系，呈現(xiàn)金字塔結(jié)構(gòu)，上一層是下一層的兩倍。更新瓦片時(shí)先更新最下一層的瓦片，把它的像素改成更新后的瓦片的像素。對(duì)于它的上一層的瓦片，更新區(qū)域變?yōu)樵瓉?lái)的四分之一，一個(gè)像素代表的距離也變成原來(lái)的2倍，所以還需要對(duì)更新區(qū)域的像素進(jìn)行重采樣。

首先需要獲得上一層瓦片的行列號(hào)，由前面已知了底層的瓦片的行列號(hào)，以及各層瓦片之間的關(guān)系。根據(jù)這種關(guān)系進(jìn)行計(jì)算出上一層瓦片的行列號(hào)。計(jì)算步驟如下：

Intlv1x=parseInt（（deta_x）/（2））；

Intlv1y=parseInt（deta_y）/（2））；

由于上一層和下一層是兩倍之間的關(guān)系，可以把畫布的寬和高平分，首先我們需要確定，待更新的區(qū)域所在的位置，在對(duì)像素進(jìn)行操作。通過(guò)計(jì)算，可以根據(jù)計(jì)算的數(shù)值判斷瓦片的位置信息。上一層瓦片位置信息如圖2所示，可以根據(jù)計(jì)算得到的值與圖片一一對(duì)應(yīng)，確定需要更新的部位。

由此，通過(guò)調(diào)整畫布的寬和高的范圍就可以實(shí)現(xiàn)想要更新的部分像素的替換。主要代碼如下：

for（m=0；m

for（n=0；n

data3[p3*4+0]=data1[p1*4+0]；

data3[p3*4+1]=data1[p1*4+1]；

data3[p3*4+2]=data1[p1*4+2]；

data3[p3*4+3]=data1[p1*4+3]；}}

2 瓦片地圖更新實(shí)現(xiàn)

根據(jù)前面的設(shè)計(jì)思路，以Visual Studio 開發(fā)平臺(tái)，采用Visual C#建立ASP.NET網(wǎng)站，并驗(yàn)證設(shè)計(jì)思路的可行性。

2.1 底層瓦片的更新

首先在界面的左側(cè)區(qū)域，設(shè)計(jì)了一個(gè)div標(biāo)簽，里面用來(lái)放置地圖。該地圖有地圖的放大縮小，平移等一般功能。右側(cè)設(shè)計(jì)了兩個(gè)畫布，分別用來(lái)接收待更新的瓦片，以及處理后的瓦片數(shù)據(jù)。通過(guò)添加一個(gè)input標(biāo)簽，并限制文件屬性為圖片，來(lái)選擇加載一張用于更新的瓦片。自動(dòng)計(jì)算出需要更新的瓦片的位置，計(jì)算出瓦片的行列號(hào)，并把圖片繪制在右邊的畫布框。如圖3，為更新之前的瓦片數(shù)據(jù)。

通過(guò)瓦片更新程序，實(shí)現(xiàn)圖片處理功能。這里主要是利用canvas的像素處理功能，把需要更新的瓦片的像素替換成待更新的瓦片的像素，并把得到的像素?cái)?shù)組繪制到畫布上。利用畫布的toDataURL程序，將數(shù)據(jù)轉(zhuǎn)換成blob類型的數(shù)據(jù)，并可以保存到本地。實(shí)現(xiàn)把處理之后的圖片保存到本地的功能。如圖4為底層瓦片的更新后的瓦片數(shù)據(jù)。

2.2 其它各層瓦片的更新

然后根據(jù)各層級(jí)瓦片的聯(lián)系，可以計(jì)算出對(duì)應(yīng)的上一級(jí)瓦片行列號(hào)，從而可以進(jìn)行各層瓦片的數(shù)據(jù)更新。通過(guò)對(duì)像素的重采樣，以及像素的修改，并保存到本地，來(lái)替換原來(lái)的舊的瓦片[7]。在進(jìn)行像素重采樣時(shí)，若使用采樣間距為上下左右各一個(gè)像素，會(huì)發(fā)現(xiàn)新得到的圖片會(huì)出現(xiàn)鋸齒，不平滑。原來(lái)的實(shí)線會(huì)變成虛線，這種方法不太理想。這里采用canas的圖像重繪的特性，調(diào)整瓦片的大小為原來(lái)的一半。得到的效果就沒有出現(xiàn)鋸齒，比較光滑。刷新頁(yè)面后就可以看到更新之后的地圖?？梢钥吹礁轮坝覀?cè)沒有紅色的點(diǎn)要素，更新之后出現(xiàn)了紅色的點(diǎn)。如圖5及圖6，分別為對(duì)應(yīng)的上一層瓦片，更新前后的數(shù)據(jù)。

3 結(jié)束語(yǔ)

通過(guò)本瓦片數(shù)據(jù)更新系統(tǒng)，可以實(shí)現(xiàn)數(shù)據(jù)的更新自動(dòng)化操作，實(shí)現(xiàn)了對(duì)電子地圖瓦片數(shù)據(jù)的系統(tǒng)化管理。豐富了數(shù)據(jù)更新方法，提高更新效率[8]。豐富以往瓦片數(shù)據(jù)只能從服務(wù)器更新的手段。這種通過(guò)更新地圖瓦片文件的方式，比傳統(tǒng)方式更加快捷高效，特別是重要點(diǎn)位要素的快速更新。解決了目前電子地圖更新遇到的一些問(wèn)題，為數(shù)字城市，電子地圖數(shù)據(jù)維護(hù)提供保障。

參考文獻(xiàn)：

[1]李福洪，朱雪虹，張書亮.數(shù)字城市電子地圖瓦片更新系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].江蘇：地理空間信息，2016，14（8）：38-41.

[2]李芙蓉.基于GIS的三維虛擬校園的設(shè)計(jì)與實(shí)現(xiàn)[D].西安：長(zhǎng)安大學(xué)，2014.

[3]劉三民，王杰文.空間數(shù)據(jù)存儲(chǔ)管理研究綜述[J].電腦與信息技術(shù)，2006，14（3）：19-22.

[4]祝云.基于ArcGIS Server的瓦片電子地圖數(shù)據(jù)更新機(jī)制研究[J].山東：測(cè)繪通報(bào)，2013，12（1）：92-93.

[5]周婷婷.電子地圖局部更新方法研究[J].福建：地理空間信息，2014，12（4）：162-164.

[6]張勝.WebGIS海量瓦片數(shù)據(jù)管理引擎的設(shè)計(jì)與實(shí)現(xiàn)[D].浙江：浙江師范大學(xué)，2009.

[7]蘇旭明.WebGIS瓦片地圖關(guān)鍵技術(shù)研究[J].北京：北京測(cè)繪，2012，2（2）：9-12.

[8]李小光，王建.基于WebGIS的校園地理信息系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].礦山測(cè)量，2013，1（2）：15-18.