Bing Maps Silverlight Control
虽然为我们提供了简洁、方面的开发模型,但也有许多
不足之处,比如我们想实现
一个迷你小地图
功能,Bing Map Silverlight Control就没有这样的内置控件,要想实现这一
功能就需要我们自己想办法。当然您也可以使用第三方提供的相关扩展组件去实现这一
功能,比如我在
上一篇文章中所介绍到的DeepEarth所提供的MiniMap控件,详细请查阅《Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图》。
在了解过Silverlight的对象剪切(Cli
p)特性后在来实现迷你小地图的
功能就非常简单了,实际上界面上就是布局的两个地图,而迷你小地图则通过Silverlight剪切技术剪切出我们想实现的图形
效果就OK了。然后就将外围的大地图和小地图的位置同步,让其在放大或缩小的同时大小地图的
显示是同步的。如下是xaml的
代码块:
<Grid x:Name="LayoutRoot">
<m:Map x:Name="map" Margin="0,0" CredentialsProvider="
{Static
resource MyCredentials}"
MouseClick="map_MouseClick"
ScaleVisibility="Visible"
CopyrightVisibility="Collapsed">
<m:MapTileLayer Name="ChinaTileLayer"></m:MapTileLayer>
</m:Map>
<Canvas x:Name="cMiniMap"
Width="200"
Height="200"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,5,0" >
<m:Map x:Name="MiniMap"
CredentialsProvider="
{Static
resource MyCredentials}"
Width="200"
Height="200"
Mode="
road"
navigationVisibility="Collapsed"
ScaleVisibility="Collapsed"
logoVisibility="Collapsed"
CopyrightVisibility="Collapsed">
<m:Map.Clip> <!--进行圆形几何图形剪切-->
<EllipseGeometry RadiusX="94" RadiusY="94" Center="100,100" />
</m:Map.Clip>
<m:MapTileLayer x:Name="MiniChinaTileLayer"></m:MapTileLayer>
</m:Map>
<Ellipse Width="200" Height="200"
stroke="#FFFCB134"
strokeThick
ness="6" Margin="0,0" />
<Ellipse Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="94,94,0" x:Name="ellipse" Fill="#FFFCB134" />
</Canvas>
</Grid>
上面
代码块的两个地图(Ma
p)控件都附加了@L_871_0
@mapTileLayer,这是用来通过
自定义Tile
source加载
中文地图所用的,下面是具体的实现
代码:
map.Mode = new MercatorMode(
);
map.Center = new Microsoft.Map
s.MapContro
l.LOCATIOn(29.5076372217973,106.
489384971208
);
map.ZoomLevel = 8;
MiniMap.Mode = new MercatorMode(
);
MiniMap.Center = new Microsoft.Map
s.MapContro
l.LOCATIOn(29.5076372217973,106.
489384971208
);
MiniMap.ZoomLevel = 8;
};
}
如上就实现了将大小地图都绑定上了直定义的加载
中文Tile
source,接下来需
要做的就是实现大小地图的同步
显示,原理就是当大地图的试图改变的时候同时设置小地图的中心地理位置,可以通过地图的TargetViewChanged事件来完成这一
功能,在TargetViewChanged事件的处理
函数里使用地图的TargetCenter
属性来
获取到当前地图的中心坐标点,然后将此坐标点设置为小地图的中心坐标点就实现了地图的同步
显示。
/// <sum
Mary>
/// 当地图试图改变后同步迷你小地图的定位
/// </sum
Mary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void map_TargetViewChanged(ob
ject sender,MapEventArgs
E)
{
Map m = sender as Map;
thi
s.MiniMap.Center=new
LOCATIOn(
m.TargetCenter.Latitude,
m.TargetCenter.Longitud
E);
thi
s.MiniMap.ZoomLevel = map.ZoomLevel;
}
这样就实现了迷你小地图
功能,除此之外我们还可以做一些扩展
功能的开发。比如在
功能导航条上
加上控制迷你小地图的
功能按钮,可以设置迷你小地图是否呈现。关于
自定义或扩展
功能导航
菜单的详细实现请查阅《【Silverlight】Bing Maps学习系列(九):
自定义功能导航条(Custom NavigationBar)》 这篇
文章里的详细介绍。最终的
效果如下图所示:
因为要通过
功能导航条实现动态的控制迷你小地图的
显示,这里就需要定义
一个导航条的Command来实现控制的逻辑处理,如下
代码定义:
public class MiniMapCommand:NavigationBarCommandBase
{
public MiniMapCommand()
{ }
public override void Execute(MapBase ma
p)
{
switch (thi
s.GetStatus(ma
p))
{
case NavigationBarCommandStatu
s.checked:
MainPage.MiniCanva
s.Visibility = Visibility.Collapsed;
break;
case NavigationBarCommandStatu
s.Normal:
MainPage.MiniCanva
s.Visibility = Visibility.Visible;
break;
}
}
public override NavigationBarCommandStatus GetStatus(MapBase ma
p)
{
NavigationBarCommandStatus normal = NavigationBarCommandStatu
s.Normal;
if (MainPage.MiniCanva
s.Visibility == Visibility.Visibl
E)
{
normal = NavigationBarCommandStatu
s.checked;
}
return normal;
}
}
自定义处理迷你小地图的Command完成后,接下来就可以在
功能菜单导航条上
加上一个功能处理按钮,使用直定义的Command去处理该按钮的行为控制,如下
代码块:
thi
s.map.MapForeground.TemplateApplied += (oo,e
E) =>
{
thi
s.map.MapForeground.NavigationBar.TemplateApplied += (ooo,ee
E) =>
{
var navigationBar = thi
s.map.MapForeground.NavigationBar;
navigationBar.HorizontalPane
l.Children.Add(new CommandSeparator()
);
CommandToggleButton btnMini = new CommandToggleButton(new MiniMapCommand(),"迷你地图","迷你地图"
);
navigationBar.HorizontalPane
l.Children.Add(btnMini
);
};
};
想了解更多关于Bing Maps地图服务的知识,请
查询: