一步一步手寫GIS開源項目-（2）地圖平移縮放實現

系列文章目錄

一步一步手寫GIS開源項目-（1）500行代碼實現基礎GIS展示功能

一步一步手寫GIS開源項目-（2）地圖平移縮放實現

項目github地址：https://github.com/HuHongYong/ATtuingMap

1. 地圖平移

地圖平移分為三步：

1鼠標按下-首先要取得鼠標按下地圖的屏幕坐標，以及保存這時候的地圖圖片。

/// <summary>
/// 鼠標按下
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
     //鼠標按下的屏幕坐標位置
     _mousedrag = e.Location;
     //鼠標按下，為了區分普通鼠標移動和鼠標按下移動
     _mousedragging = true;
     //當前地圖 圖片
     _mousedragImg = pictureBox1.Image;
}

2鼠標移動-平移過程對上一步的地圖圖片進行切割，以模擬地圖拖放效果。如圖：

/// <summary>
/// 鼠標移動
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
     var point = Transform.MapToWorld(new PointF(e.X, e.Y), myMap);
     label1.Text = $"坐標X:{point.X}  Y:{point.Y}";
     //拖動已有圖像
     if (_mousedragging)
     {
         Bitmap _dragImg1 = new Bitmap(pictureBox1.Width, pictureBox1.Height);
         Graphics g = Graphics.FromImage(_dragImg1);
         g.Clear(Color.Transparent);

        //圖片裁剪
         g.DrawImageUnscaled(_mousedragImg,
                             new System.Drawing.Point(e.Location.X - _mousedrag.X,
                                                      e.Location.Y - _mousedrag.Y));
         g.Dispose();
         pictureBox1.Image = _dragImg1;
     }
}

3鼠標彈起-zoom地圖縮放不變，只需重新定位地圖中心點，對地圖進行重新繪制。

/// <summary>
/// 鼠標彈起事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
     //地圖的新中心
     System.Drawing.Point pnt = new System.Drawing.Point(pictureBox1.Width / 2 + (_mousedrag.X - e.Location.X),
                                            pictureBox1.Height / 2 + (_mousedrag.Y - e.Location.Y));
     //修改鼠標拖動后的地圖中心空間坐標點
     myMap.Center = Transform.MapToWorld(pnt, myMap);
     pictureBox1.Image = myMap.GetMap();
     //取消鼠標拖動
     _mousedragging = false;
}

2.地圖縮放

地圖縮放比較難理解，這里我們以下圖的例子為例，黑色邊框為地圖可視區域，紅色矩形代表的地圖上的一個矢量圖形，這時候鼠標在左上角或者任意一點，如圖1、2，

    

滾動鼠標滾輪對地圖進行放大，這是展示不同鼠標點放大后的地圖如圖3、4

   

      我們知道地圖的兩個核心要素為zoom和新的地圖中心點坐標，zoom=zoom*縮放倍數，新的地圖中心點坐標怎么算呢？我們可以通過第5、6圖進行簡單的轉化便可以算出。

首先通過把地圖中心點定位到鼠標點，鼠標點的空間坐標已經知道，可以從六張圖中看出，鼠標點到未來中心點的紫色線是恆定的，那我們知道了未來中心點的屏幕坐標，便可以求出他的未來中心點的空間坐標。實現代碼如下：

   

 

/// <summary>
/// 鼠標滾輪觸發縮放地圖事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void MapImage_Wheel(object sender, MouseEventArgs e)
{
     //重新定位鼠標位置為中心點
     myMap.Center = Transform.MapToWorld(new System.Drawing.Point(e.X, e.Y), myMap);
     //e.Delta常數，鼠標滾輪滾一下
     double scale = (e.Delta / 120.0);
     //縮放1.2倍
     double scaleBase = 1 + (2.0 / 10);
     //重新設置zoom縮放等級
     myMap.Zoom *= Math.Pow(scaleBase, scale);

    //如圖第5、6中的未來中心點的屏幕坐標
     int NewCenterX = (pictureBox1.Width / 2) + ((pictureBox1.Width / 2) - e.X);
     int NewCenterY = (pictureBox1.Height / 2) + ((pictureBox1.Height / 2) - e.Y);
     //修改鼠標縮放后的地圖中心點空間坐標
     myMap.Center = Transform.MapToWorld(new System.Drawing.Point(NewCenterX, NewCenterY), myMap);
     pictureBox1.Image = myMap.GetMap();
}

3.總結

        本節主要講了一下地圖的平移和縮放的實現，展示地圖操作的最基礎的操作功能，相信大家可以通過簡單的代碼理解到GIS最核心的展示功能，下一節主要講一下shape文件中的.dbf屬性文件的讀取以及鼠標點擊查詢，敬請期待。

本節代碼上傳github，生成一個release，大家可以參考調試一下項目源碼。

github項目地址：https://github.com/HuHongYong/ATtuingMap

作者：ATtuing

出處：http://www.cnblogs.com/ATtuing

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。