(十四)WebGIS中地圖放大縮小的設計和實現


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

1.背景

在上一章中,我們給出了整個工具欄設計的核心,使用命令模式,並設計了具體工具類所繼承的基類——Command類。從這一章開始我們便正式進入了具體工具類的設計和實現。

放大和縮小工具是最基礎的工具之一,其操作分為三種:

a.點擊地圖,進行放大縮小

b.拉框,進行放大縮小

c.滾輪調控放大縮小

針對這三種操作方式,我們進行了不同的代碼邏輯設計。

2.分析

a.滾輪調控地圖放大縮小是一個固定的操作,即使切換到其他操作上時,此操作也應該同樣生效。所以,將此功能應該放入到基類Command類中。

b.點擊地圖時,應該根據工具選擇,進行以點擊點為中心,將地圖放大一個級別或者縮小一個級別。

c.拉框進行地圖放大時,根據拉框的大小進行對應的地圖級別的放大和縮小。

但是,這里涉及到一個問題,地圖的級別是固定的,如果單純的將四角坐標變成拉框大小,則此時很可能並沒有對應此四角坐標的級別。同時,四角坐標不一定一定要設計成拉框的真實大小,有很多系統,其真實的四角坐標是拉框大小再乘以一個固定參數而得,比如1.5倍。

d.拉框進行地圖縮小時,有兩種思路去實現。一種相對復雜,一種相對簡單。同樣在下面我們會具體解說。

3.地圖放大和縮小的原理

要了解滴入放大和縮小的原理,我們必須對柵格地圖中瓦片的獲得以及拼接顯示有基本的理解,大家可以回看我在此系列中的第二章到第六章。

這里,我對放大和縮小的核心原理做大致的講解。

3.1流程圖

以下是整個操作實現的流程圖:

 

                       

3.2具體解說

操作分為拉框和點擊,根據兩種操作可以獲得兩種參數。針對拉框獲得的參數只包括屏幕的地理四角坐標,針對點擊獲得的參數則包括了屏幕的地理四角坐標以及要顯示的級別的。

根據參數的不同,瓦片的請求同樣也分為兩種請求方式。

針對只有屏幕地理四角坐標的參數,瓦片請求時,會首先算出與此屏幕四角坐標最溫和的地圖級別是多少,然后從新算出此時的屏幕地理四角坐標以及相關的瓦片的真實范圍。

針對屏幕地理四角坐標和顯示級別都有的參數,瓦片請求時,會從新算出在此顯示級別下,屏幕的地理四角坐標應該是多少,中心點是參數中屏幕四角坐標的中心點。

4.放大功能的設計

在上面我們提到了放大功能設計的兩種方式,點擊和拉框。

a.點擊操作時,以點擊點為中心點,給出一個基於此中心點的范圍(可以默認加減一個參數即可),然后獲得此時的地圖級別,如果地圖不是最小級別(0),則將此Level減1,便是需要顯示的地圖級別(注:這里級別越小,比例尺越小,即放大)。

b.拉框操作時,用拉框范圍,或者該范圍乘以的基數為請求參數中的屏幕地理四角坐標,請求瓦片。

5.縮小功能的設計

a.點擊操作時,與放大操作沒有本質區別,只是需要將獲得的此時地圖級別加1即可。

b.拉框操作時,如上面提到過的問題。這里有兩種方式來解決,一種相對難一些,一種相對簡單一些。難一點的,需要我們首先得出此時的拉框范圍與此時屏幕范圍的比值recPercent,然后有兩種處理方式:一般的是用此時屏幕范圍除以recPercent得到需要的屏幕地理范圍;復雜的是用此recPercent做相關的變化然后乘以屏幕地理范圍。兩種方法本質是一樣的。簡單的方法,就是把縮小功能的拉框操作設計的與點擊時的操作一樣即可。

6.優化工作

在拉框時,能夠將拉框的矩形畫出,會使效果美化很多。這里只需要監聽幾種mouse事件,做出相關邏輯控制即可實現。

7.深入探討

在我們重新申請了地圖瓦片,改變了屏幕地理四角坐標后,其實是進行了一次地圖的刷新的功能。這里,我們需要在完成地圖放大和縮小后,拋出一個地圖的Zoom事件,這樣地圖上的矢量圖層監聽到該事件后,才能做出相關的重繪操作。否則矢量圖層將與目前的柵格圖層出現疊加錯誤。

8.總結

在這一章我們講解了地圖放大和縮小功能的設計和實現,在下一章節中我們開始討論地圖的平移功能的設計和實現。平移功能涉及到我在前面章節中提到過的一個問題,即矢量圖層中要素的偏移問題。我們也會專門花一個章節來講解坐標的偏移問題。此問題的解決原理與之前提到的屏幕坐標和地理坐標轉換原理相結合后,能夠很好的解決矢量圖層中要素圖層的顯示問題。歡迎大家持續關注。

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

                                                                           如果您覺得本文確實幫助了您,可以微信掃一掃,進行小額的打賞和鼓勵,謝謝 ^_^

                                    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM