天地圖大規(guī)模標(biāo)注顯示的探討

何鵬舉

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

天地圖大規(guī)模標(biāo)注顯示的探討

何鵬舉1

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

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

地圖標(biāo)注；天地圖；空間索引；Ajax

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

1 提高繪制標(biāo)注效率的方案

在測(cè)試標(biāo)注顯示效率的過(guò)程中可以發(fā)現(xiàn)，在瀏覽器中一次性顯示幾十個(gè)點(diǎn)時(shí)對(duì)效率的影響并不明顯，而增加測(cè)試數(shù)據(jù)到成百上千個(gè)點(diǎn)時(shí)性能就會(huì)迅速下降。這是由于每個(gè)標(biāo)注的DOM元素內(nèi)容較為復(fù)雜，通常包含了前景、陰影、可點(diǎn)擊區(qū)域等。因此加載大量點(diǎn)時(shí)就需要耗費(fèi)大量的資源，這種現(xiàn)象在低版本的瀏覽器中尤其突出。要解決瀏覽器的效率問(wèn)題，可以從單次操作中所加載點(diǎn)的數(shù)量或簡(jiǎn)化DOM元素入手，而簡(jiǎn)化DOM元素容易導(dǎo)致程序交互能力的下降，因此本文采用了前一種方案。要控制單次操作中加載點(diǎn)的數(shù)量，通常使用的是減少所要顯示點(diǎn)數(shù)量的方法，選擇顯示重要的興趣點(diǎn)或?qū)σ欢ǚ秶鷥?nèi)的點(diǎn)進(jìn)行聚合[2]。這樣的辦法在顯示效率上更有優(yōu)勢(shì)，但需以犧牲顯示細(xì)節(jié)來(lái)達(dá)成。

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

該方式在最初加載地圖的時(shí)候只使用服務(wù)端傳輸?shù)娇蛻?hù)端的標(biāo)注點(diǎn)切片，然后在用戶(hù)將鼠標(biāo)移動(dòng)地圖上時(shí)，客戶(hù)端就向服務(wù)器請(qǐng)求鼠標(biāo)所在切片及其周?chē)衅臉?biāo)注點(diǎn)數(shù)據(jù)。這種方法直觀地體現(xiàn)興趣點(diǎn)的地理分布，同時(shí)在用戶(hù)交互體驗(yàn)上還能接近已經(jīng)加載了所有標(biāo)注點(diǎn)。本文選取這種方法進(jìn)行研究。

2 技術(shù)實(shí)現(xiàn)

本文將實(shí)現(xiàn)分解為數(shù)據(jù)層、服務(wù)層和表現(xiàn)層3個(gè)獨(dú)立的部分[3]。實(shí)現(xiàn)的具體內(nèi)容如圖1。

圖1 技術(shù)實(shí)現(xiàn)

2.1 數(shù)據(jù)層實(shí)現(xiàn)

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

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

2.2 服務(wù)層實(shí)現(xiàn)

服務(wù)端根據(jù)客戶(hù)端所需要的請(qǐng)求方式，以REST方式實(shí)現(xiàn)興趣點(diǎn)和注記查詢(xún)[5,6]。首先，客戶(hù)端需要根據(jù)切片范圍請(qǐng)求興趣點(diǎn)和注記信息，若要顯示興趣點(diǎn)的詳細(xì)信息，還需要根據(jù)興趣點(diǎn)的ID進(jìn)行查詢(xún)。主要實(shí)現(xiàn)描述的服務(wù)如表1。

表1 興趣點(diǎn)服務(wù)和注記服務(wù)

在興趣點(diǎn)和注記的查詢(xún)過(guò)程中都涉及到空間范圍的查詢(xún)，該查詢(xún)的效率也對(duì)客戶(hù)端的響應(yīng)時(shí)間有巨大的影響。為了提高查詢(xún)效率，需在之前所建索引的基礎(chǔ)上采用高效的查詢(xún)算法。本文在數(shù)據(jù)層中所使用的數(shù)據(jù)庫(kù)管理系統(tǒng)為Oracle，因此在算法上直接采用Oracle Spatial的空間操作函數(shù)[7]。首先使用服務(wù)中傳入的xMin、yMin、xMax、yMax 4個(gè)參數(shù)，得到一個(gè)矩形的左下角和右上角這2個(gè)點(diǎn)，以這2個(gè)點(diǎn)構(gòu)造一個(gè)類(lèi)型為SDO_GEOMETRY的Oracle Spatial矩形對(duì)象，然后就可以使用Oracle Spatial的SDO_INSIDE函數(shù)來(lái)判斷興趣點(diǎn)是否落在這個(gè)矩形范圍內(nèi)。

由于查詢(xún)結(jié)果只返回所有興趣點(diǎn)中的一小部分，因此應(yīng)該在數(shù)據(jù)庫(kù)端完成數(shù)據(jù)的查詢(xún)過(guò)濾，以避免大量數(shù)據(jù)在服務(wù)層和數(shù)據(jù)層之間傳輸，減小對(duì)內(nèi)部網(wǎng)絡(luò)造成的壓力。服務(wù)層主要負(fù)責(zé)從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)并向客戶(hù)端返回，占用的服務(wù)器資源并不多，查詢(xún)過(guò)程中的運(yùn)算壓力集中在數(shù)據(jù)層。若在并發(fā)量大時(shí)查詢(xún)效率出現(xiàn)問(wèn)題，可以對(duì)數(shù)據(jù)庫(kù)的性能進(jìn)行診斷，從而進(jìn)一步優(yōu)化。

2.3 表現(xiàn)層實(shí)現(xiàn)

客戶(hù)端主要實(shí)現(xiàn)用戶(hù)鼠標(biāo)位置的監(jiān)聽(tīng)、切片范圍內(nèi)標(biāo)注信息的獲取、繪制和標(biāo)注信息的管理。主要實(shí)現(xiàn)圖2中的步驟。

1）鼠標(biāo)位置監(jiān)聽(tīng)，確定用戶(hù)鼠標(biāo)的位置是否落在地圖上。若是，則計(jì)算鼠標(biāo)位置所在的緩存切片號(hào)。

2）確定鼠標(biāo)所在緩存切片號(hào)以后，再對(duì)該切片范圍內(nèi)是否已經(jīng)請(qǐng)求過(guò)標(biāo)注數(shù)據(jù)進(jìn)行判斷。若沒(méi)有請(qǐng)求過(guò)，就向服務(wù)端請(qǐng)求切片范圍內(nèi)的標(biāo)注數(shù)據(jù)。為了具有更好的用戶(hù)體驗(yàn)，客戶(hù)端采用Ajax的請(qǐng)求方式，使客戶(hù)端在發(fā)出請(qǐng)求以后，用戶(hù)界面還能夠?qū)τ脩?hù)的其他操作作出響應(yīng)。

3）在請(qǐng)求數(shù)據(jù)后，地圖還需要響應(yīng)用戶(hù)鼠標(biāo)移動(dòng)到標(biāo)注點(diǎn)上的事件。在鼠標(biāo)沒(méi)有移動(dòng)到切片上時(shí)，地圖只顯示標(biāo)注點(diǎn)的切片數(shù)據(jù)，隱藏矢量數(shù)據(jù)。而若鼠標(biāo)移動(dòng)到了標(biāo)注點(diǎn)位置，則顯示矢量數(shù)據(jù)，并處理相關(guān)的點(diǎn)擊事件。

4）由于用戶(hù)操作過(guò)程中需要不斷請(qǐng)求標(biāo)注數(shù)據(jù)，若不對(duì)這些增加到內(nèi)存中的數(shù)據(jù)進(jìn)行管理，其占據(jù)的空間不斷增加，就會(huì)影響到整個(gè)程序的效率。因此需要在程序中增加標(biāo)注信息釋放模塊，該模塊實(shí)現(xiàn)以下功能：①根據(jù)用戶(hù)可見(jiàn)的地圖范圍管理標(biāo)注信息，將每個(gè)切片對(duì)應(yīng)的標(biāo)注信息存入哈希表中。②在用戶(hù)平移地圖的過(guò)程中，若某個(gè)切片已經(jīng)移出當(dāng)前視野范圍，則清除該切片范圍內(nèi)的標(biāo)注信息。③在地圖縮放操作以后，清除之前所在級(jí)別的標(biāo)注信息。

圖2 表現(xiàn)層的實(shí)現(xiàn)

2.4 實(shí)現(xiàn)效果比較

本文在同樣的代碼基礎(chǔ)上實(shí)現(xiàn)2種標(biāo)注點(diǎn)的加載方式：①前文所描述的方法，該方法在顯示分類(lèi)為小學(xué)的興趣點(diǎn)時(shí)先加載興趣點(diǎn)切片，而后在鼠標(biāo)移動(dòng)到某一切片上時(shí)才請(qǐng)求具體的興趣點(diǎn)信息。②不加載興趣點(diǎn)切片，一次性請(qǐng)求所有興趣點(diǎn)并顯示。為測(cè)試低版本瀏覽器的兼容性，本文選擇在已經(jīng)清除了緩存的Internet Explorer 8中對(duì)比2種實(shí)現(xiàn)的效率。實(shí)驗(yàn)中查詢(xún)主城區(qū)范圍內(nèi)的小學(xué)，屏幕中包含256個(gè)小學(xué)。運(yùn)行第一種實(shí)現(xiàn)時(shí)，可以迅速地看到所有興趣點(diǎn)的分布，響應(yīng)時(shí)間小于0.5 s，而移動(dòng)到點(diǎn)上以后顯示相關(guān)信息也基本不需要等待。運(yùn)行第二種實(shí)現(xiàn)時(shí)，顯示興趣點(diǎn)分布響應(yīng)的時(shí)間大于2 s，而且在興趣點(diǎn)顯示完畢之前，用戶(hù)無(wú)法進(jìn)行其他操作，嚴(yán)重影響了用戶(hù)體驗(yàn)。

2.5 應(yīng)用實(shí)踐

圖3 天地圖·福建的專(zhuān)題地圖模塊中標(biāo)注的交互操作

本文所描述的實(shí)現(xiàn)已應(yīng)用于天地圖·福建的專(zhuān)題地圖模塊。如圖3，在選擇專(zhuān)題類(lèi)別后，地圖上顯示了所選專(zhuān)題中的所有興趣點(diǎn)。地圖中顯示的所有標(biāo)注點(diǎn)都可以與鼠標(biāo)互動(dòng)，在鼠標(biāo)移動(dòng)到標(biāo)注點(diǎn)上的時(shí)候，標(biāo)注點(diǎn)顯示為選中狀態(tài)，點(diǎn)擊后可顯示具有標(biāo)注點(diǎn)詳細(xì)信息的氣泡框。

3 結(jié) 語(yǔ)

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

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

[2] 趙一.大規(guī)?；ヂ?lián)網(wǎng)地理標(biāo)注快速聚類(lèi)方法研究[D].遼寧:遼寧工程技術(shù)大學(xué),2012

[3] 段克敏,李宏利,邰曉峰.基于互聯(lián)網(wǎng)的地圖標(biāo)注系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].地理信息世界,2011(4):51-56

[4] 楊凌云,李菁,金遠(yuǎn)雄.電子地圖動(dòng)態(tài)注記的研究[J].軟件導(dǎo)刊,2005(18):6-18

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

[6] 熊自誠(chéng).基于SOA的Web GIS技術(shù)研究[D].武漢:武漢理工大學(xué),2009

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

P208

B

1672-4623（2015）01-0174-02

10.3969/j.issn.1672-4623.2015.01.058

何鵬舉，碩士，現(xiàn)從事天地圖·福建、移動(dòng)地理信息系統(tǒng)建設(shè)。

2014-09-16。

項(xiàng)目來(lái)源：福建省測(cè)繪地理信息局2013-2014年科技基金資助項(xiàng)目。