学习使用Bing Maps Silverlight Control（六）：自定义“鹰眼”地图

8 “鹰眼”地图

在电子地图中，用于显示当前窗口在全图中的位置，当前窗口换图时，鹰眼自动进行相应变化。鹰眼进行漫游。通过改变鹰眼中窗口位置可改变相应的主窗口地图显示区域。——百度百科

实现鹰眼地图实际上就是一个小尺寸的Bing Maps控件，并利用 7 自定义显示范围 中的自定义Map Mode 限制地图的缩放级别和显示范围。

首先，自定义一个适用于小尺寸地图显示的Mode，通过继承并限制ChinaMode的缩放级别来达到小地图的效果：

/// <summary>
/// 中国地图的小地图模式
/// </summary>
public class ChinaMiniMode : ChinaMode
{
    public ChinaMiniMode()
    {
        base.MapZoomRange = new Range<double>(4, 4);
    }
}

然后，向正常的地图控件中添加一个小尺寸的地图控件。

以下是前台界面xaml代码：

<!--主地图-->
<c:OfflineMap Name="map" AnimationLevel="UserInput" >
    <c:OfflineMap.Mode>
    <!--自定义的地图模式-->
        <c:ChinaMode></c:ChinaMode>
    </c:OfflineMap.Mode>
    <!--小地图的容器-->
    <Canvas x:Name="cMiniMap" Width="200" Height="200" Margin="0,5,5,0"
        HorizontalAlignment="Right" VerticalAlignment="Top" >
        <!--小地图-->
        <c:OfflineMap x:Name="MiniMap" Width="200" Height="200" 
            NavigationVisibility="Collapsed" 
            ScaleVisibility="Collapsed" 
            LogoVisibility="Collapsed"
            CopyrightVisibility="Collapsed"
            Center="{Binding Center, ElementName=map, Mode=TwoWay}"
            ZoomLevel="{Binding ZoomLevel, ElementName=map, Mode=TwoWay}"
            AnimationLevel="UserInput"
            MouseWheel="MiniMap_MouseWheel">
            <c:OfflineMap.Mode>
                <!--小地图的地图模式-->
                <c:ChinaMiniMode></c:ChinaMiniMode>
            </c:OfflineMap.Mode>
        </c:OfflineMap>
        <!--矩形外圈-->
        <Rectangle Width="200" Height="200" Stroke="#FFBB00" StrokeThickness="4" Margin="0,0,0,0" />
        <!--中心圆点-->
        <Ellipse Height="5" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="98,98,0,0" Fill="#FFBB00" />
    </Canvas>
</c:OfflineMap>

其中的MiniMap就是要添加的小尺寸控件，将其宽高固定在了200x200像素，隐藏掉了所有的附加图层，把两个地图的动画效果都设定为动画效果（AnimationLevel）在用户输入（UserInput）时产生，目的是为了两个地图在进行同步移动时更加流畅，同时避免不必要的动画效果（同时也会失去设置视野时的动画效果）。两个地图的视野同步时通过数据绑定完成的，对两个地图的Center和ZoomLevel进行了双向绑定。

因为小地图只限制了一级缩放，所以把小地图的滚轮屏蔽掉（不屏蔽在滚动时会发生漂移）：

//不允许在小地图上使用滚轮
private void MiniMap_MouseWheel(object sender, MouseWheelEventArgs e)
{
    e.Handled = true;
}

“鹰眼”地图最终效果如下（右上角）：

（以上内容部分参考自：http://www.cnblogs.com/beniao/archive/2010/03/18/1688863.html，请访问原博客查看更多内容。）