Bing Maps进阶系列六：使用Silverlight剪切（Clip）特性实现Bing Maps的迷你小地图

　　Bing Maps Silverlight Control虽然为我们提供了简洁、方面的开发模型，但也有许多不足之处，比如我们想实现一个迷你小地图功能，Bing Map Silverlight Control就没有这样的内置控件，要想实现这一功能就需要我们自己想办法。当然您也可以使用第三方提供的相关扩展组件去实现这一功能，比如我在上一篇文章中所介绍到的DeepEarth所提供的MiniMap控件，详细请查阅《Bing Maps进阶系列五：通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图》。

　　介绍如何实现迷你小地图前先得先了解下Silverlight中对象的剪切（Clip）特性，Silverlight中提供五种对象剪切特性，它们分别是GeometryGroup、LineGeometry、PathGeometry、EllipseGeometry和RectangleGeometry，通过这五种对象剪切特性基本上可以用来完成我们在开发中常用的剪切操作。具体的使用方式这里不作介绍，详细可查询MSDN（http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.clip(VS.95).aspx）或其他相关资料。

　　在了解过Silverlight的对象剪切(Clip)特性后在来实现迷你小地图的功能就非常简单了，实际上界面上就是布局的两个地图，而迷你小地图则通过Silverlight剪切技术剪切出我们想实现的图形效果就OK了。然后就将外围的大地图和小地图的位置同步，让其在放大或缩小的同时大小地图的显示是同步的。如下是xaml的代码块：

　　上面代码块的两个地图(Map)控件都附加了一个MapTileLayer，这是用来通过自定义TileSource加载中文地图所用的，下面是具体的实现代码：

publicMainPage()
{
    InitializeComponent();
    this.Loaded +=(o, e) =>
        {
            //街道图
UriBuilder tileSourceUri =newUriBuilder("http://r2.tiles.ditu.live.com/tiles/r{quadkey}.png?g=49");
            LocationRectTileSource tileSource =newLocationRectTileSource(tileSourceUri.Uri.ToString(),
                newLocationRect(newLocation(60, 60), newLocation(13, 140)),
                newRange<double>(1, 16));

ChinaTileLayer.TileSources.Add(tileSource);
            ChinaTileLayer.Opacity =0.9;
            MiniChinaTileLayer.TileSources.Add(tileSource);
            ChinaTileLayer.Opacity =0.9;

map.Mode =newMercatorMode();
map.Center =newMicrosoft.Maps.MapControl.Location(29.5076372217973, 106.489384971208);
map.ZoomLevel =8;

MiniMap.Mode =newMercatorMode();
            MiniMap.Center =newMicrosoft.Maps.MapControl.Location(29.5076372217973, 106.489384971208);
            MiniMap.ZoomLevel =8;
        };
}

　　如上就实现了将大小地图都绑定上了直定义的加载中文TileSource，接下来需要做的就是实现大小地图的同步显示，原理就是当大地图的试图改变的时候同时设置小地图的中心地理位置，可以通过地图的TargetViewChanged事件来完成这一功能，在TargetViewChanged事件的处理函数里使用地图的TargetCenter属性来获取到当前地图的中心坐标点，然后将此坐标点设置为小地图的中心坐标点就实现了地图的同步显示。

///<summary>
///当地图试图改变后同步迷你小地图的定位
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
protectedvoidmap_TargetViewChanged(objectsender, MapEventArgs e)
{
    Map m =sender asMap;
    this.MiniMap.Center=newLocation(m.TargetCenter.Latitude,m.TargetCenter.Longitude);
    this.MiniMap.ZoomLevel =map.ZoomLevel;
}

　　这样就实现了迷你小地图功能，除此之外我们还可以做一些扩展功能的开发。比如在功能导航条上加上控制迷你小地图的功能按钮，可以设置迷你小地图是否呈现。关于自定义或扩展功能导航菜单的详细实现请查阅《【Silverlight】Bing Maps学习系列（九）：自定义功能导航条（Custom NavigationBar）》这篇文章里的详细介绍。最终的效果如下图所示：

　　因为要通过功能导航条实现动态的控制迷你小地图的显示，这里就需要定义一个导航条的Command来实现控制的逻辑处理，如下代码定义：

publicclassMiniMapCommand:NavigationBarCommandBase
{
publicMiniMapCommand()
{ }

publicoverridevoidExecute(MapBase map)
    {
        switch(this.GetStatus(map))
        {
            caseNavigationBarCommandStatus.Checked:
                MainPage.MiniCanvas.Visibility =Visibility.Collapsed;
                break;

caseNavigationBarCommandStatus.Normal:
                MainPage.MiniCanvas.Visibility =Visibility.Visible;
                break;
        }
    }

publicoverrideNavigationBarCommandStatus GetStatus(MapBase map)
    {
        NavigationBarCommandStatus normal =NavigationBarCommandStatus.Normal;
        if(MainPage.MiniCanvas.Visibility ==Visibility.Visible)
        {
            normal =NavigationBarCommandStatus.Checked;
        }
        returnnormal;
    }
}

　　自定义处理迷你小地图的Command完成后，接下来就可以在功能菜单导航条上加上一个功能处理按钮，使用直定义的Command去处理该按钮的行为控制，如下代码块：

this.map.MapForeground.TemplateApplied +=(oo, ee) =>
    {
        this.map.MapForeground.NavigationBar.TemplateApplied +=(ooo, eee) =>
            {
                var navigationBar =this.map.MapForeground.NavigationBar;
                navigationBar.HorizontalPanel.Children.Add(newCommandSeparator());
                CommandToggleButton btnMini =newCommandToggleButton(newMiniMapCommand(), "迷你地图", "迷你地图");
                navigationBar.HorizontalPanel.Children.Add(btnMini);
            };
    };

　　想了解更多关于Bing Maps地图服务的知识，请查询：

　　MSDN：http://msdn.microsoft.com/en-us/library/cc980922.aspx

　　Bing Maps开发站：http://www.microsoft.com/maps/developers/

　　Bing Maps开发SDK：http://msdn.microsoft.com/en-us/library/dd877180.aspx

　　示例代码下载

版权说明

本文属原创文章，欢迎转载且注明文章出处，其版权归作者和博客园共有。

作者：Beniao 微软Bing Maps开发群：75662563

文章出处：http://beniao.cnblogs.com/ 或 http://www.cnblogs.com/

分类: [03] Bing Maps/DE

标签: Minimap, Clip, 迷你小地图, 剪切

转载于:https://www.cnblogs.com/meimao5211/p/3350585.html

Bing Maps进阶系列六：使用Silverlight剪切（Clip）特性实现Bing Maps的迷你小地图相关推荐

Bing Maps进阶系列八：在Bing Maps中集成OpenStreetMap地图
OSM(OpenStreetMap-开放街道地图)服务就是一种发布自己地图数据图片为服务的一种实现类型,开放街道地图成立动机在于希望能创造并且提供可以被自由地使用的地理资料(像街道地图)给每个想使用的 ...
前端进阶系列(六):盒模型
盒模型是界面布局需要掌握的基本功. 盒模型基本概念盒模型四要素:margin.border.padding.content. 盒模型分为:标准盒模型(W3C盒模型) . 怪异盒模型(IE盒模型) 盒 ...
【Silverlight】Bing Maps学习系列（七）：使用Bing Maps的图片系统（Tile System）
[Silverlight]Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System) 目前包括微软必应地图在内的几乎所有在线电子地图(如:Google Maps等)都 ...
【Silverlight】Bing Maps学习系列（三）：如何控制地图
本篇主要介绍如何对地图的一些常用控制操作,包括地图加载模式.根据精度和纬度定位.变焦程度等. 一.动态设置地图加载模式在本系列二中介绍了地图加载模式,可以给地图控件设置一种模式的地图加载模式,呈现数 ...
【Silverlight】Bing Maps学习系列（九）：自定义功能导航条（Custom NavigationBar）
微软Bing Maps Silverlight Control实现了最基本的地图呈现功能,其功能其他是非常的强大,可以支持很多的扩展功能开发,本文通过自定义功能导航菜单为例介绍基于Bing Maps ...
Silverlight Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效...
原文:Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化.波感特效当我们在进行Silverlight & Bl ...
C#进阶系列——DDD领域驱动设计初探（五）：AutoMapper使用
前言:前篇搭建了下WCF的代码,就提到了DTO的概念,对于为什么要有这么一个DTO的对象,上章可能对于这点不太详尽,在此不厌其烦再来提提它的作用: 从安全上面考虑,领域Model都带有领域业务,让Cl ...
SQL Server索引进阶第六篇：书签
SQL Server索引进阶第六篇:书签索引设计是数据库设计中比较重要的一个环节,对数据库的性能其中至关重要的作用,但是索引的设计却又不是那么容易的事情,性能也不是那么轻易就获取到的,很多的技术人员 ...
DotNet进阶系列
一. 回顾历史回顾个人发展历程,自2012年初次接触开发至今(2018年)已经有六个年头,这期间陆陆续续学习并掌握了不少技术,C#语言.ORM框架.多线程技术.设计模式.前端技术.MVC.MVVM框 ...
Linq To Sql进阶系列 -目录导航
博客园CLR基础研究团队|CLR团队精品系列|C# 3.0专题 [Linq To Sql进阶系列] 目录导航 1 Linq To Sql进阶系列(一)-从映射讲起本系列,或多或少,直接或间接依赖入门 ...

Bing Maps进阶系列六：使用Silverlight剪切（Clip）特性实现Bing Maps的迷你小地图

Bing Maps进阶系列六：使用Silverlight剪切（Clip）特性实现Bing Maps的迷你小地图

Bing Maps进阶系列六：使用Silverlight剪切（Clip）特性实现Bing Maps的迷你小地图相关推荐

最新文章

热门文章