Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图

  OSM(OpenStreetMap-开放街道地图)服务就是一种发布自己地图数据图片为服务的一种实现类型,开放街道地图成立动机在于希望能创造并且提供可以被自由地使用的地理资料(像街道地图)给每个想使用的人,就像自由软体所赋予使用者的自由一样,本篇将介绍如何在Bing Maps Silverlight Control开发中去使用OSM发布的地图服务。

  要在Bing Maps Silverlight Control中集成OSM地图是非常简单的,其实无论什么地图都是以地图服务的形式发布出来的,隐藏在其后的都有一套Tile算法,最终在客户端呈现地图则根据具体的Tile映射系统的算法可确定客户端呈现的时候以何种请求的加载出地图数据。实际上要在Bing Maps中集成OSM,也就是通过自定义TileSource来实现,为所需要集成的OSM自定义一个TileSource,专门用于加载此OSM地图数据。关于Bing Maps的TileSystem可查阅我的另一篇博文:《【Silverlight】Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System)》,里面有对TileSystem的简单应用示例,还有两篇详细介绍Bing Maps的Tile System的博文连接。

  在Bing Maps Silverlight Controls开发中,实现自定义的TileSource有多种方式,可以直接继承Bing Maps Silverlight Controls内置的TileSource实现无范围限制的图层加载,也可以继承于LocationRectTileSource类实现定制范围的地图图层加载,这里以LocationRectTileSource为例演示自定义TileSource加载指定范围的OSM(http://www.openstreetmap.org/)地图数据。


public class OpenStreetMapTileSource : LocationRectTileSource
{
    private const string TilePathMapnik = @"http://{S}.tile.openstreetmap.org/{Z}/{X}/{Y}.png";
    private readonly Random _Rand = new Random();
    private readonly string[] TilePathPrefixes = new[] { "a", "b", "c", "d", "e", "f" };     public OpenStreetMapTileSource()
        : base(TilePathMapnik,
            new LocationRect(new Location(60, 60), new Location(13, 140)),
            new Range<double>(1, 17))
    { }     public override Uri GetUri(int x, int y, int zoomLevel)
    {
        string prefix = TilePathPrefixes[_Rand.Next(6)];
        string url = this.UriFormat;
        url = url.Replace("{S}", prefix);
        url = url.Replace("{Z}", zoomLevel.ToString());
        url = url.Replace("{X}", x.ToString());
        url = url.Replace("{Y}", y.ToString());         return new Uri(url);
    }
}

  如上代码块就是为OSM(http://www.openstreetmap.org/)地图自定义的TileSource,接下来只需要在程序中制定地图的MapTileLayer的源为该TileSource就能实现加载OSM的地图,实现OSM地图与Bing Maps集成了。

<m:Map x:Name="map" Margin="0,0,0,0" CredentialsProvider="{StaticResource MyCredentials}" 
       ScaleVisibility="Visible"
       CopyrightVisibility="Collapsed">
    <m:MapTileLayer x:Name="OSMTileLayer"></m:MapTileLayer>
</m:Map>

  可以通过在XAML中直接给地图(Map)添加一个MapTileLayer,用于加载指定的TileSource的地图,也可以在程序中动态构造MapTileLayer,两种方式实现的效率是一样的。如上代码块是通过直接在XAML代码中加入的MapTileLayer图层,那么可以通过如下方式设置该Tile图层的源,去加载OSM地图。

OSMTileLayer.TileSources.Add(new OpenStreetMapTileSource());

  编译项目运行可以看到成功的将OSM地图集成进了Bing Maps中,详细如下图所示:

        

  需要注意的是OSM也有很多种,在自定义OSM的Tile加载算法得时候得根据所要集成的不同OSM地图进行编写,比如下面的自定义加载OSM地图的TileSource定义:


/// <summary>
/// 自定义OSM地图服务的TileSource
/// </summary>
public class OSMTileSource : LocationRectTileSource
{
    public OSMTileSource()
        : base(@"http://az1923.vo.msecnd.net/osm/{2}/{0}/{1}.png",
            new LocationRect(new Location(-19.047, 47.379), new Location(-18.733, 47.645)),
            new Range<double>(1, 17))
    {
        
    }     /// <summary>
    /// 重写Tile算法
    /// </summary>
    /// <param name="x"></param>
    /// <param name="y"></param>
    /// <param name="zoomLevel"></param>
    /// <returns></returns>
    public override Uri GetUri(int x, int y, int zoomLevel)
    {
        return new Uri(string.Format(this.UriFormat, x, y, zoomLevel), UriKind.RelativeOrAbsolute);
    }
}

  通过和上面集成OSM()地图的TileSource的算法是不同的,加载地图的Tile算法主要取决于发布OSM地图的Tile映射。上面代码块中的定义指定的加载地图图层的范围也不在是中国地区范围了,下图为最终运行效果截图:

        

  最近很多朋友都在问我一个问题,要如何才能发布自己的图片为地图服务,然后加载到地图组件中呈现出来?其实要实现这一功能点是可以的,当然实现这一功能也是痛苦的,首先得了解常用、常见或是一些比较通用的GIS相关的概论和知识体系,了解相关的技术原理和工具的使用后就可以将自己的图片发布为OSM的地图服务,通过本文所介绍的方式就可以加载到Bing Maps中呈现了。

  推荐资源:

  http://www.openstreetmap.org/

  http://msdn.microsoft.com/en-us/library/ee690939(v=MSDN.10).aspx

版权说明

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

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

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

 
 

Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图的更多相关文章

  1. Bing Maps进阶系列七:Bing Maps功能导航菜单华丽的变身

    Bing Maps进阶系列七:Bing Maps功能导航菜单华丽的变身 Bing Maps Silverlight Control所提供的功能导航是非常强大的,在设计上对扩展的支持非常好,提供了许多用 ...

  2. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  3. AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能

    在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...

  4. Bing Maps进阶系列九:使用MapCruncher进行地图切片并集成进Bing Maps

    Bing Maps进阶系列九:使用MapCruncher进行地图切片并集成进Bing Maps 在Bing Maps开发中,由于各种应用功能的不同,更多的时候用户可能需要将自己的一部分图片数据作为地图 ...

  5. Bing Maps进阶系列六:使用Silverlight剪切(Clip)特性实现Bing Maps的迷你小地图

    Bing Maps进阶系列六:使用Silverlight剪切(Clip)特性实现Bing Maps的迷你小地图 Bing Maps Silverlight Control虽然为我们提供了简洁.方面的开 ...

  6. Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图

    Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图 Bing Maps Silverlight Control虽然为我们提供了简洁.方便的开发模 ...

  7. Bing Maps进阶系列四:路由功能服务(RouteService)

    Bing Maps进阶系列四:路由功能服务(RouteService) Bing Maps提供的路由功能服务(RouteService)可以实现多方位的计算地图上的路线指示,路径行程等功能,比如说实现 ...

  8. Bing Maps进阶系列三:使用地图图像服务(ImageryService)

    Bing Maps进阶系列三:使用地图图像服务(ImageryService) 地图图像服务(ImageryService)提供了根据地理位置(经度和纬度)坐标和地图的缩放级别解析出对应于地图图片系统 ...

  9. Bing Maps进阶系列二:使用GeocodeService进行地理位置检索

    Bing Maps进阶系列二:使用GeocodeService进行地理位置检索 在<Bing Maps进阶系列一:初识Bing Maps地图服务>里已经对GeocodeService的功能 ...

随机推荐

  1. js获取微信版本号的方法

    微信现在几乎已经普遍在使用,但是微信版本一直在更新,不同的版本有不同的功能,于是了解微信的版本号很重要,以便自己及时更新体验新的功能.那么如何用js获取微信版本号呢? 一.判断微信版本号 ? 1 2 ...

  2. CAD得到所有实体方法(网页版)

    主要用到函数说明: IMxDrawSelectionSet::AllSelect 得到当前空间的所有实体.详细说明如下: 参数 说明 [in,defaultvalue(NULL)] IMxDrawRe ...

  3. vue组件---动态组件&异步组件

    (1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...

  4. ThinkPHP---案例1登录登出和添加部门

    配置文件分3类:系统配置文件,分组配置文件,应用配置文件 ①系统配置文件ThinkPHP/Conf/convention.php: ②分组 / 模块 /平台配置文件Home/Conf/config.p ...

  5. idea使用maven install命令打包(springboot),jar运行时出现没有主清单属性

    原因是:我的项目里除了springboot启动类还自定义了多个main来搞了点小demo,就因为这个原因我花了近一天的时间才找清楚原因. 解决方案:找到多余的main方法,注释或删除掉. (下面可以忽 ...

  6. mybatis中resultMap引发的吐血bug

    简单的讲: 问题背景:如果在写mybatis中的resultMap时,不下心将resultMapde id写成映射接口的名字,会发生什么? 结论:单元测试进度条卡住但不报错, Tomcat运行不报错, ...

  7. libevent reference Mannual V -- Bufferevents

    FYI: http://www.wangafu.net/~nickm/libevent-book/Ref6_bufferevent.html Bufferevents: concepts and ba ...

  8. 洛谷——P2846 [USACO08NOV]光开关Light Switching

    P2846 [USACO08NOV]光开关Light Switching 题目大意: 灯是由高科技——外星人鼠标操控的.你只要左击两个灯所连的鼠标, 这两个灯,以及之间的灯都会由暗变亮,或由亮变暗.右 ...

  9. Flask项目中整合各组件

    一.介绍 主要介绍flask_sqlalchemy.flask_script.flask_migrate这三个组件该如何整合到flask项目中,以及如何使用. # 安装组件 pip3 install ...

  10. 转来的——python webdriver自动化测试初步印象——转来的

    python webdriver自动化测试初步印象 以下示例演示启动firefox,浏览google.com,搜索Cheese,等待搜索结果,然后打印出搜索结果页的标题 from selenium i ...