天地圖大規模標注顯示的探討

何鵬舉

（1.福建省基礎地理信息中心，福建 福州 350002）

天地圖大規模標注顯示的探討

何鵬舉1

（1.福建省基礎地理信息中心，福建 福州 350002）

對現有興趣點數據的查詢顯示進行分析，在后端采用空間索引技術，以加快數據的查詢效率，在前端根據瓦片范圍異步加載顯示興趣點，以減少用戶等待的時間。該方案不僅能減少用戶操作電子地圖的等待時間，還能提供興趣點詳細信息的交互查詢，有效提升用戶體驗。該方案已應用于天地圖·福建的專題地圖模塊，應用效果良好。

地圖標注；天地圖；空間索引；Ajax

天地圖為公眾和企業提供了權威、可信、統一的地理信息服務，這些服務所提供的數據詳細程度高、數據量大，要在瀏覽器端進行展示就要考慮顯示的效率問題。作為底圖的切片數據只在當前視圖范圍內顯示少量圖片，在顯示效率上不存在問題。而作為查詢結果所顯示的興趣點若需要全部顯示，則可能在進行一次查詢后進行大量繪制工作。在現有的實現中，考慮到一次性加載所有興趣點會造成不支持HTML5規范的低版本瀏覽器（如Internet Explorer 8及其先前版本）無法響應的問題[1]，所以采用了顯示當前分頁興趣點的方式。該方式不能全面展示興趣點的分布情況，容易影響到用戶查找所需信息的效率，在用戶體驗上不能夠滿足需求。天地圖作為面向公眾的地圖網站，需要追求優良的用戶體驗，同時對于主流瀏覽器應具有良好的支持，因此本文對在主流瀏覽器上同時顯示大量標注的方案進行研究。

1 提高繪制標注效率的方案

在測試標注顯示效率的過程中可以發現，在瀏覽器中一次性顯示幾十個點時對效率的影響并不明顯，而增加測試數據到成百上千個點時性能就會迅速下降。這是由于每個標注的DOM元素內容較為復雜，通常包含了前景、陰影、可點擊區域等。因此加載大量點時就需要耗費大量的資源，這種現象在低版本的瀏覽器中尤其突出。要解決瀏覽器的效率問題，可以從單次操作中所加載點的數量或簡化DOM元素入手，而簡化DOM元素容易導致程序交互能力的下降，因此本文采用了前一種方案。要控制單次操作中加載點的數量，通常使用的是減少所要顯示點數量的方法，選擇顯示重要的興趣點或對一定范圍內的點進行聚合[2]。這樣的辦法在顯示效率上更有優勢，但需以犧牲顯示細節來達成。

本文通過控制單次操作所加載點的數量，將所要查詢的興趣點數據分別保存為2種格式：一種是只包含興趣點數據的切片，用于在用戶查詢時快速地顯示興趣點的分布狀況；另一種是保存在數據庫中的矢量數據，在用戶在某個區域進行詳細信息的查詢操作時，才從數據庫中獲取屬性并繪制DOM元素。

該方式在最初加載地圖的時候只使用服務端傳輸到客戶端的標注點切片，然后在用戶將鼠標移動地圖上時，客戶端就向服務器請求鼠標所在切片及其周圍切片的標注點數據。這種方法直觀地體現興趣點的地理分布，同時在用戶交互體驗上還能接近已經加載了所有標注點。本文選取這種方法進行研究。

2 技術實現

本文將實現分解為數據層、服務層和表現層3個獨立的部分[3]。實現的具體內容如圖1。

圖1 技術實現

2.1 數據層實現

以福州市部分興趣點為實驗數據源，包含以Shape文件形式存儲的興趣點和注記數據。其中興趣點數據需要處理成為切片格式，用于發布服務。查詢注記的位置和屬性信息時，服務器端可能有大量并發訪問。為了提升查詢效率，首先需要將Shape文件錄入到數據庫中，然后為幾何字段建立空間索引，并將注記表及其空間范圍表關聯的ID字段設置為主鍵。

注記由符號和文字組成，在符號化過程中，符號和文字的范圍相互關聯，通常符號在文字的左邊。同時在不同的比例尺下需要權衡注記的位置，以免出現相互覆蓋的情況[4]。為了減輕客戶端和服務端的計算壓力，在錄入數據的同時就根據當前級別分辨率、符號大小、注記文字長度計算出注記符號和文字的范圍，將得到的范圍存入另外一張與注記表具有相同ID字段的表中，供查詢時直接讀取并繪制。

2.2 服務層實現

服務端根據客戶端所需要的請求方式，以REST方式實現興趣點和注記查詢[5,6]。首先，客戶端需要根據切片范圍請求興趣點和注記信息，若要顯示興趣點的詳細信息，還需要根據興趣點的ID進行查詢。主要實現描述的服務如表1。

表1 興趣點服務和注記服務

在興趣點和注記的查詢過程中都涉及到空間范圍的查詢，該查詢的效率也對客戶端的響應時間有巨大的影響。為了提高查詢效率，需在之前所建索引的基礎上采用高效的查詢算法。本文在數據層中所使用的數據庫管理系統為Oracle，因此在算法上直接采用Oracle Spatial的空間操作函數[7]。首先使用服務中傳入的xMin、yMin、xMax、yMax 4個參數，得到一個矩形的左下角和右上角這2個點，以這2個點構造一個類型為SDO_GEOMETRY的Oracle Spatial矩形對象，然后就可以使用Oracle Spatial的SDO_INSIDE函數來判斷興趣點是否落在這個矩形范圍內。

由于查詢結果只返回所有興趣點中的一小部分，因此應該在數據庫端完成數據的查詢過濾，以避免大量數據在服務層和數據層之間傳輸，減小對內部網絡造成的壓力。服務層主要負責從數據庫獲取數據并向客戶端返回，占用的服務器資源并不多，查詢過程中的運算壓力集中在數據層。若在并發量大時查詢效率出現問題，可以對數據庫的性能進行診斷，從而進一步優化。

2.3 表現層實現

客戶端主要實現用戶鼠標位置的監聽、切片范圍內標注信息的獲取、繪制和標注信息的管理。主要實現圖2中的步驟。

1）鼠標位置監聽，確定用戶鼠標的位置是否落在地圖上。若是，則計算鼠標位置所在的緩存切片號。

2）確定鼠標所在緩存切片號以后，再對該切片范圍內是否已經請求過標注數據進行判斷。若沒有請求過，就向服務端請求切片范圍內的標注數據。為了具有更好的用戶體驗，客戶端采用Ajax的請求方式，使客戶端在發出請求以后，用戶界面還能夠對用戶的其他操作作出響應。

3）在請求數據后，地圖還需要響應用戶鼠標移動到標注點上的事件。在鼠標沒有移動到切片上時，地圖只顯示標注點的切片數據，隱藏矢量數據。而若鼠標移動到了標注點位置，則顯示矢量數據，并處理相關的點擊事件。

4）由于用戶操作過程中需要不斷請求標注數據，若不對這些增加到內存中的數據進行管理，其占據的空間不斷增加，就會影響到整個程序的效率。因此需要在程序中增加標注信息釋放模塊，該模塊實現以下功能：①根據用戶可見的地圖范圍管理標注信息，將每個切片對應的標注信息存入哈希表中。②在用戶平移地圖的過程中，若某個切片已經移出當前視野范圍，則清除該切片范圍內的標注信息。③在地圖縮放操作以后，清除之前所在級別的標注信息。

圖2 表現層的實現

2.4 實現效果比較

本文在同樣的代碼基礎上實現2種標注點的加載方式：①前文所描述的方法，該方法在顯示分類為小學的興趣點時先加載興趣點切片，而后在鼠標移動到某一切片上時才請求具體的興趣點信息。②不加載興趣點切片，一次性請求所有興趣點并顯示。為測試低版本瀏覽器的兼容性，本文選擇在已經清除了緩存的Internet Explorer 8中對比2種實現的效率。實驗中查詢主城區范圍內的小學，屏幕中包含256個小學。運行第一種實現時，可以迅速地看到所有興趣點的分布，響應時間小于0.5 s，而移動到點上以后顯示相關信息也基本不需要等待。運行第二種實現時，顯示興趣點分布響應的時間大于2 s，而且在興趣點顯示完畢之前，用戶無法進行其他操作，嚴重影響了用戶體驗。

2.5 應用實踐

圖3 天地圖·福建的專題地圖模塊中標注的交互操作

本文所描述的實現已應用于天地圖·福建的專題地圖模塊。如圖3，在選擇專題類別后，地圖上顯示了所選專題中的所有興趣點。地圖中顯示的所有標注點都可以與鼠標互動，在鼠標移動到標注點上的時候，標注點顯示為選中狀態，點擊后可顯示具有標注點詳細信息的氣泡框。

3 結 語

本文研究在瀏覽器中顯示大量標注點的解決方案，該解決方案避免了單次加載大量標注所產生的顯示效率問題，且在不同版本的瀏覽器中都具有良好的兼容性和交互性。由于這種顯示方式先加載興趣點切片，因此可以從2種應用角度考慮該方案的實施：①對于查詢內容相對固定的應用場景（如專題地圖和常用關鍵字的查詢），可對標注點進行預切片，發布為WMTS服務，以獲得更快的響應速度。②對于展示內容不固定的應用場景，可以將標注點圖層發布為WMS服務，以適應數據變動的需求。

[1] 廖明,潘媛芳.WebGIS矢量地圖繪制方法的性能比較分析[C].華東六省一市測繪學會第十一次學術交流會論文集,2009

[2] 趙一.大規?；ヂ摼W地理標注快速聚類方法研究[D].遼寧:遼寧工程技術大學,2012

[3] 段克敏,李宏利,邰曉峰.基于互聯網的地圖標注系統設計與實現[J].地理信息世界,2011(4):51-56

[4] 楊凌云,李菁,金遠雄.電子地圖動態注記的研究[J].軟件導刊,2005(18):6-18

[5] 李雙青,楊如軍,馬驍馳,等.基于Oracle Spatial的REST的API的設計與實現[J].廣西師范學院學報:自然科學版,2012,29(2):82-87

[6] 熊自誠.基于SOA的Web GIS技術研究[D].武漢:武漢理工大學,2009

[7] 向萬里,張靜芳.基于Oracle Spatial的城市公交網絡出行路徑選擇算法[J].蘭州交通大學學報,2009,28(6):119-122

P208

B

1672-4623（2015）01-0174-02

10.3969/j.issn.1672-4623.2015.01.058

何鵬舉，碩士，現從事天地圖·福建、移動地理信息系統建設。

2014-09-16。

項目來源：福建省測繪地理信息局2013-2014年科技基金資助項目。