摘要:所謂的鷹眼,就是一個縮減地圖,上面有一個矩形框,矩形框地區就是當前顯示的地圖地區,拖動矩形框可以改變當前地圖顯示的位置,改變矩形框的大小,可以改變當前地圖的顯示地區大小,從起到導航的作用。鷹眼是地圖瀏覽中常用的功能之一。關於鷹眼的實現方式,最常用的是用一個 MapControl控制項顯示地圖全圖,並在上面畫一個紅色矩形框表示當前地圖的顯示範圍,並實現鷹眼 MapControl 與主表單的 MapControl 互動。
教程目錄:
第一講 案頭GIS應用程式架構的建立
第二講 菜單的添加及其實現
第三講 MapControl與PageLayoutControl同步
第四講 狀態列資訊的添加與實現
第五講 鷹眼的實現
第六講 右鍵菜單添加與實現
教程Bug及最佳化方案1
第七講 圖層符號選取器的實現1
第七講 圖層符號選取器的實現2
第八講 屬性資料表的查詢顯示
------------------------------------------------------------------
在上一講中,我們實現了狀態列的相關資訊顯示,在這一講中我們將要實現鷹眼功能。
所謂的鷹眼,就是一個縮減地圖,上面有一個矩形框,矩形框地區就是當前顯示的地圖地區,拖動矩形框可以改變當前地圖顯示的位置,改變矩形框的大小,可以改變當前地圖的顯示地區大小,從起到導航的作用。鷹眼是地圖瀏覽中常用的功能之一。
關於鷹眼的實現方式,最常用的是用一個 MapControl 控制項顯示地圖全圖,並在上面畫一個紅色矩形框表示當前地圖的顯示範圍,並實現鷹眼 MapControl 與主表單的 MapControl 互動。本講最終效果如下所示:
圖 1 鷹眼效果
1 、添加鷹眼控制項
由於本教程在第一講中沒有預先考慮到鷹眼所放的位置,故我們要先稍微調整一下程式架構,並添加一個 MapControl 用於顯示鷹眼。
在本教程中,我們將鷹眼放在圖層控制項的下方,調整方法如下:
( 1 )在設計檢視中,選擇 tabControl1 控制項,即放圖層和屬性的那個容器,將其Dock 屬性設為 None ,並用滑鼠拖拽將其縮小。把工具箱中的 SplitContainer 控制項拖到表單的左窗格,即放在tabControl1 控制項的旁邊。並將其 Orientation 屬性設定為 Horizontal 。
( 2 )選中 tabControl1 控制項,按 Ctrl+X 剪下,再選中剛才粘貼到 SplitContainer2 的 Panel1 中, 2 所示。操作完成後效果 3 所示。
圖 2
圖 3
( 3 )再選中 SplitContainer2 控制項(如果不好選中,直接以屬性面板中選擇 SplitContainer2 ),將其 Dock 屬性設定為 Fill 。再選中 tabControl1 ,將其 Dock 屬性也設定為 Fill 。
( 4 )從工具箱中選擇 MapControl 控制項並拖到 SplitContainer2 的 Panel2 ,作為鷹眼控制項。最終效果 4 所示。
圖 4
2 、鷹眼的實現
( 1 )載入地圖到鷹眼控制項
當地圖載入到主 Map 控制項時,同時也載入到鷹眼控制項,在 axMapControl1_OnMapReplaced 事件響應函數(此函數上一講中已經添加了)中添加如下代碼:
private void axMapControl1_OnMapReplaced(object sender, IMapControlEvents2_OnMapReplacedEvent e)
{
// 前面代碼省略
// 當主地圖顯示控制項的地圖更換時,鷹眼中的地圖也跟隨更換
this.axMapControl2.Map = new MapClass();
// 添加主地圖控制項中的所有圖層到鷹眼控制項中
for (int i = 1; i <= this.axMapControl1.LayerCount; i++)
{
this.axMapControl2.AddLayer(this.axMapControl1.get_Layer(this.axMapControl1.LayerCount - i));
}
// 設定 MapControl 顯示範圍至資料的全域範圍
this.axMapControl2.Extent = this.axMapControl1.FullExtent;
// 重新整理鷹眼控制項地圖
this.axMapControl2.Refresh();
}
( 2 )繪製鷹眼矩形框
為鷹眼控制項 MapControl1 添加 OnExtentUpdated 事件,此事件是在主 Map 控制項的顯示範圍改變時響應,從而相應更新鷹眼控制項中的矩形框。其響應函數代碼如下:
private void axMapControl1_OnExtentUpdated(object sender, IMapControlEvents2_OnExtentUpdatedEvent e)
{
// 得到新範圍
IEnvelope pEnv = (IEnvelope)e.newEnvelope;
IGraphicsContainer pGra = axMapControl2.Map as IGraphicsContainer;
IActiveView pAv = pGra as IActiveView;
// 在繪製前,清除 axMapControl2 中的任何圖形元素
pGra.DeleteAllElements();
IRectangleElement pRectangleEle = new RectangleElementClass();
IElement pEle = pRectangleEle as IElement;
pEle.Geometry = pEnv;
// 設定鷹眼圖中的紅線框
IRgbColor pColor = new RgbColorClass();
pColor.Red = 255;
pColor.Green = 0;
pColor.Blue = 0;
pColor.Transparency = 255;
// 產生一個線符號對象
ILineSymbol pOutline = new SimpleLineSymbolClass();
pOutline.Width = 2;
pOutline.Color = pColor;
// 設定顏色屬性
pColor = new RgbColorClass();
pColor.Red = 255;
pColor.Green = 0;
pColor.Blue = 0;
pColor.Transparency = 0;
// 設定填充符號的屬性
IFillSymbol pFillSymbol = new SimpleFillSymbolClass();
pFillSymbol.Color = pColor;
pFillSymbol.Outline = pOutline;
IFillShapeElement pFillShapeEle = pEle as IFillShapeElement;
pFillShapeEle.Symbol = pFillSymbol;
pGra.AddElement((IElement)pFillShapeEle, 0);
// 重新整理
pAv.PartialRefresh(esriViewDrawPhase.esriViewGraphics, null, null);
}
( 3 )鷹眼與主 Map 控制項互動
為鷹眼控制項 MapControl2 添加 OnMouseDown 事件,代碼如下:
private void axMapControl2_OnMouseDown(object sender, IMapControlEvents2_OnMouseDownEvent e)
{
if (this.axMapControl2.Map.LayerCount != 0)
{
// 按下滑鼠左鍵移動矩形框
if (e.button == 1)
{
IPoint pPoint = new PointClass();
pPoint.PutCoords(e.mapX, e.mapY);
IEnvelope pEnvelope = this.axMapControl1.Extent;
pEnvelope.CenterAt(pPoint);
this.axMapControl1.Extent = pEnvelope;
this.axMapControl1.ActiveView.PartialRefresh(esriViewDrawPhase.esriViewGeography, null, null);
}
// 按下滑鼠右鍵繪製矩形框
else if (e.button == 2)
{
IEnvelope pEnvelop = this.axMapControl2.TrackRectangle();
this.axMapControl1.Extent = pEnvelop;
this.axMapControl1.ActiveView.PartialRefresh(esriViewDrawPhase.esriViewGeography, null, null);
}
}
}
為鷹眼控制項 MapControl2 添加 OnMouseMove 事件,主要實現按下滑鼠左鍵的時候移動矩形框,同時也改變主的圖控制項的顯示範圍。代碼如下:
private void axMapControl2_OnMouseMove(object sender, IMapControlEvents2_OnMouseMoveEvent e)
{
// 如果不是左鍵按下就直接返回
if (e.button != 1) return;
IPoint pPoint = new PointClass();
pPoint.PutCoords(e.mapX, e.mapY);
this.axMapControl1.CenterAt(pPoint);
this.axMapControl1.ActiveView.PartialRefresh(esriViewDrawPhase.esriViewGeography, null, null);
}
1、 編譯運行
按 F5 編譯運行程式。
期待的鷹眼功能你已經實現了,按下左鍵在鷹眼視窗中移動,或者按下右鍵在鷹眼視窗中畫一個矩形,主地圖視窗的顯示範圍都會跟著變化。主地圖視窗中的地圖經放大縮小等操作後,鷹眼視窗的矩形框大小也會隨著改變。