一種WebGIS瓦片數據更新方法研究

穆星 祝靜怡

摘 要：由于電子地圖的快速發展以及城市建設的加速，許多電子地圖的瓦片數據急需更新，為了能夠實時的從客戶端更新瓦片數據，主要采用了WebGIS以及HTML、JavaScript的相關技術，通過對瓦片像素的讀取、修改和保存，來實現瓦片數據更新。實驗結果表明可以通過該方法快速實時的更新數據，該方法使瓦片更新方式更加靈活不需要在服務器進行維護，改變了以往數據更新需要全部重新切片的弊端。

關鍵詞：WebGIS；HTML5；JavaScript；瓦片數據；局部更新；像素讀取

中圖分類號：P208 文獻標志碼：A 文章編號：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

引言

隨著國內各種數字城市的建成和使用，如何保持地理信息數據的現勢性以及如何更有效率的更新數據，成為現在電子地圖需要解決的核心問題[1]。傳統的瓦片更新方式通常是在后臺數據庫進行更新。而從用戶提出地圖的修改工作到數據庫的修改，其中的環節太多，周期太長[2]。傳統的更新方式是以瓦片為單位進行的更新，而如果小塊區域的點位變化，僅僅是為了修改一個點，而采用這種更新方式，有點顯得費時費力。從本質上說，瓦片其實是一張圖片，它是由像素組成的。只要有需要更新的地圖的位置信息，就可以計算獲得需要更新的瓦片的行列號[3]。從而讀取該圖片的像素，經過修改像素，就可以更新數據。或者可以根據提供的最底層的瓦片數據，計算得到對應的各個層級需要更新的對應的瓦片的位置經過像素的提取，重采樣，來得到新的瓦片，就可以對該瓦片進行替換。從而解決瓦片更新的聯動問題，減少瓦片的輸出量，提高瓦片的更新效率[4]。

1 地圖瓦片更新方法

地圖瓦片更新的思路主要是，首先根據地圖的坐標以及瓦片所在的層級信息，計算出地圖瓦片的行列號，并結合HTML的canvas工具，將圖片繪制在畫布中，通過context.getImageData（）；來獲得圖片的像素信息。通過對像素的遍歷和修改，實現指定行列位置處的瓦片更新。

1.1 底層瓦片的更新

首先計算瓦片的行列號，假設地圖切片的原點是（originX，originY），地圖的瓦片大小是tileSize，屏幕上1像素代表的實際距離是resolution。計算坐標點（x，y）所在的瓦片的行列號的公式是[5]：

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

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

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

1.2 其它層瓦片的更新

各層瓦片之間的關系，呈現金字塔結構，上一層是下一層的兩倍。更新瓦片時先更新最下一層的瓦片，把它的像素改成更新后的瓦片的像素。對于它的上一層的瓦片，更新區域變為原來的四分之一，一個像素代表的距離也變成原來的2倍，所以還需要對更新區域的像素進行重采樣。

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

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

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

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

由此，通過調整畫布的寬和高的范圍就可以實現想要更新的部分像素的替換。主要代碼如下：

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 瓦片地圖更新實現

根據前面的設計思路，以Visual Studio 開發平臺，采用Visual C#建立ASP.NET網站，并驗證設計思路的可行性。

2.1 底層瓦片的更新

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

通過瓦片更新程序，實現圖片處理功能。這里主要是利用canvas的像素處理功能，把需要更新的瓦片的像素替換成待更新的瓦片的像素，并把得到的像素數組繪制到畫布上。利用畫布的toDataURL程序，將數據轉換成blob類型的數據，并可以保存到本地。實現把處理之后的圖片保存到本地的功能。如圖4為底層瓦片的更新后的瓦片數據。

2.2 其它各層瓦片的更新

然后根據各層級瓦片的聯系，可以計算出對應的上一級瓦片行列號，從而可以進行各層瓦片的數據更新。通過對像素的重采樣，以及像素的修改，并保存到本地，來替換原來的舊的瓦片[7]。在進行像素重采樣時，若使用采樣間距為上下左右各一個像素，會發現新得到的圖片會出現鋸齒，不平滑。原來的實線會變成虛線，這種方法不太理想。這里采用canas的圖像重繪的特性，調整瓦片的大小為原來的一半。得到的效果就沒有出現鋸齒，比較光滑。刷新頁面后就可以看到更新之后的地圖。可以看到更新之前右側沒有紅色的點要素，更新之后出現了紅色的點。如圖5及圖6，分別為對應的上一層瓦片，更新前后的數據。

3 結束語

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

參考文獻：

[1]李福洪，朱雪虹，張書亮.數字城市電子地圖瓦片更新系統的設計與實現[J].江蘇：地理空間信息，2016，14（8）：38-41.

[2]李芙蓉.基于GIS的三維虛擬校園的設計與實現[D].西安：長安大學，2014.

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

[4]祝云.基于ArcGIS Server的瓦片電子地圖數據更新機制研究[J].山東：測繪通報，2013，12（1）：92-93.

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

[6]張勝.WebGIS海量瓦片數據管理引擎的設計與實現[D].浙江：浙江師范大學，2009.

[7]蘇旭明.WebGIS瓦片地圖關鍵技術研究[J].北京：北京測繪，2012，2（2）：9-12.

[8]李小光，王建.基于WebGIS的校園地理信息系統的設計與實現[J].礦山測量，2013，1（2）：15-18.