学习使用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,请访问原博客查看更多内容。)
输了你,赢了世界又如何...