基於AGS JS開發自定義貼圖圖層

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.前言

假設一個景區有多張圖片須要在地圖上展現，而且隨着地圖的縮放而縮放（不是單純的以氣泡來展現）。若是利用傳統方案，則是咱們首先將圖片糾正賦予地理信息，而後根據地圖級別進行切圖，最後以瓦片的形式疊加至地圖上，工做量是很大的。然而考慮到圖片自己不會太大（小於3M），那麼有沒有其餘方法來解決呢。這裏我和你們一塊兒探討幾種解決思路。

2.解決思路

2.1基於grahpic和symbol來解決

2.1.1思路描述

簡單說就是獲取圖片左上角和右下角對應的地理座標，給grahpic的geometry賦上左上角座標，grahpic的symbol賦予圖片的url、以及經過地理座標轉換獲取到的兩點屏幕座標間的screenwidth和screenheight。這裏尤爲要注意symbol的xoffset和yoffset兩個屬性值需（+screenwidth/2,-screenheight/2）。最後監聽地圖的縮放事件，作相關的symbol的width和height計算便可。

2.1.2討論

優點是實現簡單：

a.直接利用AGS已有對象完成。

b.不用考慮拖拽時的座標變化等。

劣勢：當地圖放大到必定級別，symbol的長寬大過地圖屏幕範圍時則symbol將再也不渲染。

2.2直接添加DIV+IMG來解決

2.2.1思路描述

直接在Map所在的ParentDIV中爲圖片建立的DIV+IMG，原理與思路一相同，經過換算地理座標的屏幕座標來設置各IMG的長寬以及DIV的left和top。這裏尤爲須要注意的是對地圖拖拽事件一樣須要監聽並進行相關處理。

2.2.2討論

優點：地圖縮放到任意級別都能一樣縮放展現圖片。

劣勢：圖片自己沒法響應地圖事件，好比當鼠標在圖片上，縮放、拖拽均不能進行。

2.3繼承AGS的Layer來自定義開發貼圖圖層

除須要繼承Layer外，其餘思路與思路二沒有太大區別。可是能夠規避思路一中圖片超過屏幕範圍沒法顯示的問題，也能規避思路二中的鼠標在圖片上時沒法進行地圖操做的問題。

2.4總結

考慮到思路一和思路二中的明顯劣勢問題，採用思路三是更好的選擇。

3.詳細實現（繼承AGS的Layer開發貼圖圖層）

3.1繼承layer重寫相關方法

  在Map的DOM中新增一個DIV：

當圖層從Map中去除時去掉全部監聽事件：

3.2監聽縮放事件進行重繪

對於每個IMG的width和height要根據目前四角座標對應的屏幕座標進行換算：

3.3監聽平移事件進行座標變化

4.幾點注意

a.當繼承的是Layer時，setMap函數須要返回的必須是用DOJO生成的DIV。假如繼承的是GraphicLayer，返回的不能爲DIV，由於GrahpicLayer其是SVG構造。

b.爲提升顯示效率，平移重繪的最好方法是直接改變DIV的左上角位置，而不是對全部IMG進行刪除再從新添加。

5.結果展現

以歸元寺爲例子：

                                   

 

 

                                                                          -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^