(十四)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/

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