一種基于ＡＪＡＸ的電子地圖平滑移動算法的實現

摘要：針對電子地圖交互操作過程中的響應速度問題，從地圖小圖像拼接的角度出發，提出一種基于AJAX技術的電子地圖平滑移動算法。當對電子地圖進行平移操作時，地圖小圖像能夠迅速、平滑地拼接成為一幅完整的地圖圖像并顯示在客戶端頁面上。在此基礎上進一步給出相應的地圖初始化和縮放操作的實現方法。試驗結果表明，運用此方法可以迅速創建電子地圖，流暢地對電子地圖進行平移和縮放操作，有效地減少用戶操作間歇的等待時間，提高用戶的工作效率。

關鍵詞：圖像拼接；平滑移動；坐標變換；AJAX

中圖分類號：TP399

文獻標識碼：B

文章編號：1004—373X(2008)04—131—03

Web—GIS是集計算機科學、地理學、數學等為一體的新興科學。隨著網絡技術的不斷發展，Web—GIS也在更多的B／s應用軟件中得以發揮自己的能力。在這些應用軟件中，用戶與地圖之間的交互響應速度是一個決定軟件可操作性的重要標準。

初期的Web—GIS采用CGI方式。CGI是一種連接應用軟件和Web服務器的標準技術，是HTML的功能擴展。其優點是程序簡單。但同時存在啟動時間長，反復裝載數據等缺陷。

隨后Applet，ActiveX等技術被用于客戶端的開發。他們嵌入網頁運行，功能較強，但其與服務端耦合度高，初次使用前要下載并安裝相應程序。這對普通用戶是種負擔，用戶在操作過程中常陷入長時間的等待。

AJAX技術的出現消除了網絡交互過程中的等待缺點，在從服務器讀取數據的過程中，用戶可以繼續使用其他功能而不必等待，這種異步傳輸的特性使用戶能夠更加流暢地對地圖進行操作。

本文在利用AJAX技術的基礎上提出一種利用HT—ML和JavaScript語言實現地圖平移的方法，即實現利用小圖像所在層的相對位置移動對地圖進行拼接和顯示。這種方法不在客戶端安裝任何插件，降低了客戶端的運行負擔，同時也減少了圖像數據的傳輸流量。此外，本文在此基礎上，也給出了相應的地圖縮放操作的實現方法。

1 AJAX相關技術

1.1 AJAX原理

AJAX(Asynchronous Java Script and XML)一詞最早在2005年由Adaptive Path公司的J.J.Garrett提出。AJAX綜合了JavaScript，DOM，XMLHttpRequest.XML和XSTL等現有技術。其中JavaScript，DOM和XMLHt—tpRequest是AJAX的核心技術。

1.2 地圖圖像的異步更新

一般來說，Web客戶端存在2種架構模式：富客戶端和瘦客戶端。為了使電子地圖在客戶端的功能更加豐富，人們更多的采用富客戶端模式。在AJAX技術出現以前，Web—GIS通常采用諸如CGI，plug—in，Applet等技術進行軟件富客戶端的搭建。這些技術主要以表單提交作為通信方式。客戶端以POST方式向服務器提交圖像參數，服務器根據參數生成圖像并傳回客戶端。在這個過程中，用戶只能等待而不能進行任何其他操作。

而基于AJAX的Web—GIS應用則可以通過異步更新的方式避免上述情況的發生。AJAX采用XMLHt—tpRequest代替POST方式向服務器發送請求，由于這個過程獨立于用戶與應用軟件之間的交互，故用戶可同時對地圖進行其他操作。如圖1所示是一個典型的基于AJAX的Web—GIS應用模型。

2 地圖坐標系

Web—GIS系統中存在幾種不同的坐標系，如圖2所示。服務器端通常存在一個地理坐標系，其用于確定地物在地球上的真實位置。最常用的地理坐標系是經緯度坐標系，這種坐標系可以確定地球上任何一點的位置。

在客戶端存在另外z種坐標系，屏幕坐標系與邏輯屏幕坐標系。屏幕坐標系用于響應用戶對地圖進行的各種操作，其以瀏覽器窗口的左上角為原點，向右為x軸正方向，向下為y，軸正方向；邏輯屏幕坐標系用于在客戶端顯示地圖圖像，其在地圖初始化階段與屏幕坐標系原點重合，但隨著用戶對地圖進行平移操作，兩者之間便產生相對的位置偏移。

3 基于AJAX的電子地圖的構建

電子地圖的構建包括3個方面：地圖初始化、地圖平移以及縮放操作。客戶端地圖的構建采用HTML和JavaScript語言實現，其中每塊小圖像都以＜Image＞標簽表示，并放入一個與其尺寸相同的＜div＞標簽中。小圖像之間的拼接通過改變＜div＞標簽的相對位置來實現。

為方便表述，將文中所用符號做如下約定：屏幕坐標系表示為{S}，其上的地圖視窗定義為矩形T，邏輯屏幕坐標系表示為{L}，地理坐標系表示為{G}，在邏輯屏幕坐標系中的客戶端地圖圖像由n×n塊正方形的小圖像拼接而成，每塊小圖像邊長為l，其左上角點的坐標表示為(ul_x，ul_y)，每塊小圖像所在的＜div＞的左上角點坐標表示為(div_x，div_y)，z表示地圖的縮放比例，圖像用Img_ij(i，j=0，1，…，n-1)表示，用戶平移地圖時的偏移量表示為(delta_x，delta_y)，連續移動時總的偏移量表示為(sumDeha_x，sumDeha_y)。

3.1初始化地圖

地圖的初始化是指利用(G)中的點E的坐標(E_x，E_y)，求(L}中n×n幅邊長為L的Img并進行拼接。

3.2小圖像拼接與地圖平移

對地圖的平移包括2種不同操作：根據(d_x，d_y)調整圖像所在層的相對位置；申請需要更新的小圖像。

3.3地圖的縮放

根據坐標系{S}中的點M的坐標(m_x，m_y)得到其在坐標系(L)的對應坐標(m_xl，m_yl)以及坐標系(G)的對應坐標(m_x2，m_y2)，用得到的坐標代入算法1中，便可實現地圖的縮放功能。

算法3 Zoom Map procedure

Begin

將sumDeha，與sumDeltay加和至M的坐標

清空sumDeltax與sumDeltay

根據M在{L}中的坐標計算其在(G)中的相應坐標時

將M代入算法1中

End

3.4 基于AJAX的電子地圖實例及分析

本文所述方法的試驗環境如下：服務器端，以tom—cat5.5作為Servlet容器，使用Mapxtreme for java 4.7作為電子地圖開發平臺；客戶端以HTML及JavaScript作為編程語言；實驗地圖數據采用Mapxtreme for java 4 .7自帶的世界地圖。

基于上述方法，以N=4為例，在客戶端拼接成一幅完整的世界地圖圖像。小圖像邊長L為200 px。沒矩形A為邊長等于2×L的正方形，則在其內部可以顯示拼接后地圖中間的4幅小圖像，圖3分別給出4幅小圖像在初始化、平移、縮小和放大操作后的拼接效果示意圖。

在地圖的響應速度方面，采用神州龍地圖網提供的地圖(http：//WWW.668map.com)與百度地圖(http：//map.baidu.com)兩個在線地圖服務程序與使用本文中算法的電子地圖程序作對比試驗，神州龍在線地圖是基于Applet技術開發的電子地圖；而百度地圖提供的是基于AJAX技術的電子地圖。試驗過程分“初始化”、“平移”和“縮放”3個測試內容，其中“初始化”采集樣本20次，其他2項測試內容各采集樣本50次。分別記錄用戶操作間歇的等待時間。試驗結果如表1所示。

基于上述試驗數據，可以看出基于Applet的電子地圖由于需要初始化時裝載數據，故初始化速度是非常慢的，而基于AJAX的電子地圖的初始化速度就要快得多，使用本文方法的地圖在初始化速度上和百度地圖無太大差別；在平移和縮放操作方面，由于Applet在初始化階段把地圖下載到客戶端，隨后的操作幾乎沒有網絡傳輸，因而速度較快，而使用本文方法的地圖雖慢于神州龍地圖，但是相對于百度地圖來說，縮放操作幾乎持平，而平移操作還有一定的優勢。

4 結 語

本文從基于AJAX技術的Web—GIS方向出發，提出一種對電子地圖進行初始化、平滑移動和縮放的實現方法。分析基于AJAX技術的電子地圖初始化、平移以及縮放算法，最終用HTMI，和JavaScript語言實現上述功能。

論文初步給出一種依靠AJAX技術實現電子地圖基本操作的方法。還將進一步在圖像分塊數量，圖像塊的尺寸等方面進行研究，嘗試提高電子地圖平滑移動算法操作的效率。