1.前言
假設(shè)一個(gè)景區(qū)有多張圖片需要在地圖上展示,并且隨著地圖的縮放而縮放(不是單純的以氣泡來(lái)展示)。如果利用傳統(tǒng)方案,則是我們首先將圖片糾正賦予地理信息,然后根據(jù)地圖級(jí)別進(jìn)行切圖,最后以瓦片的形式疊加至地圖上,工作量是很大的。然而考慮到圖片本身不會(huì)太大(小于3M),那么有沒(méi)有其他方法來(lái)解決呢。這里我和大家一起探討幾種解決思路。
2.解決思路
2.1基于grahpic和symbol來(lái)解決
2.1.1思路描述
簡(jiǎn)單說(shuō)就是獲取圖片左上角和右下角對(duì)應(yīng)的地理坐標(biāo),給grahpic的geometry賦上左上角坐標(biāo),grahpic的symbol賦予圖片的url、以及通過(guò)地理坐標(biāo)轉(zhuǎn)換獲取到的兩點(diǎn)屏幕坐標(biāo)間的screenwidth和screenheight。這里尤其要注意symbol的xoffset和yoffset兩個(gè)屬性值需(+screenwidth/2,-screenheight/2)。最后監(jiān)聽(tīng)地圖的縮放事件,做相關(guān)的symbol的width和height計(jì)算即可。
2.1.2討論
優(yōu)勢(shì)是實(shí)現(xiàn)簡(jiǎn)單:
a.直接利用AGS已有對(duì)象完成。
b.不用考慮拖拽時(shí)的坐標(biāo)變化等。
劣勢(shì):當(dāng)?shù)貓D放大到一定級(jí)別,symbol的長(zhǎng)寬大過(guò)地圖屏幕范圍時(shí)則symbol將不再渲染。
2.2直接添加DIV+IMG來(lái)解決
2.2.1思路描述
直接在Map所在的ParentDIV中為圖片創(chuàng)建的DIV+IMG,原理與思路一相同,通過(guò)換算地理坐標(biāo)的屏幕坐標(biāo)來(lái)設(shè)置各IMG的長(zhǎng)寬以及DIV的left和top。這里尤其需要注意的是對(duì)地圖拖拽事件同樣需要監(jiān)聽(tīng)并進(jìn)行相關(guān)處理。
2.2.2討論
優(yōu)勢(shì):地圖縮放到任意級(jí)別都能同樣縮放展示圖片。
劣勢(shì):圖片本身無(wú)法響應(yīng)地圖事件,比如當(dāng)鼠標(biāo)在圖片上,縮放、拖拽均不能進(jìn)行。
2.3繼承AGS的Layer來(lái)自定義開(kāi)發(fā)貼圖圖層
除需要繼承Layer外,其他思路與思路二沒(méi)有太大區(qū)別。但是可以規(guī)避思路一中圖片超過(guò)屏幕范圍無(wú)法顯示的問(wèn)題,也能規(guī)避思路二中的鼠標(biāo)在圖片上時(shí)無(wú)法進(jìn)行地圖操作的問(wèn)題。
2.4總結(jié)
考慮到思路一和思路二中的明顯劣勢(shì)問(wèn)題,采用思路三是更好的選擇。
3.詳細(xì)實(shí)現(xiàn)(繼承AGS的Layer開(kāi)發(fā)貼圖圖層)
3.1繼承l(wèi)ayer重寫(xiě)相關(guān)方法
在Map的DOM中新增一個(gè)DIV:

當(dāng)圖層從Map中去除時(shí)去掉所有監(jiān)聽(tīng)事件:

3.2監(jiān)聽(tīng)縮放事件進(jìn)行重繪
對(duì)于每一個(gè)IMG的width和height要根據(jù)目前四角坐標(biāo)對(duì)應(yīng)的屏幕坐標(biāo)進(jìn)行換算:

3.3監(jiān)聽(tīng)平移事件進(jìn)行坐標(biāo)變化

4.幾點(diǎn)注意
a.當(dāng)繼承的是Layer時(shí),setMap函數(shù)需要返回的必須是用DOJO生成的DIV。假如繼承的是GraphicLayer,返回的不能為DIV,因?yàn)镚rahpicLayer其是SVG構(gòu)造。
b.為提高顯示效率,平移重繪的最好方法是直接改變DIV的左上角位置,而不是對(duì)所有IMG進(jìn)行刪除再重新添加。
5.結(jié)果展示
以歸元寺為例子:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注