【Silverlight】Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System)

  目前包括微软必应地图在内的几乎所有在线电子地图(如:Google Maps等)都事先对地图图片(Tile)进行预处理,通过特定的算法将预处理过后的图片进行无缝的拼接,建立一套统一有规律、标准的地图映射系统。Bing Maps地图映射、坐标系以及地图Tile编码体系映射,统称为必应地图图片系统(Bing Maps Tile System)。

  如果要了解Bing Maps的地图图片系统,可以看看下面这两片文章: 

必应地图图片系统(Tile System)之一

必应地图图片系统(Tile System)之二

  了解了Bing Maps的Tile System,下面来看看如何使用Bing Maps的Tile System。首先要明确一点,地图的不同放大级别(ZoomLabel)的界面上显示的效果是又不同的多张图片组成,下面通过Tile System加载一张图片(http://images.cnblogs.com/cnblogs_com/beniao/BingMaps/China0.jpg)的示例来来证实这一说话。


 1 public MainPage()
 2 {
 3     InitializeComponent();
 4     MapTileLayer tileLayer = new MapTileLayer();
 5     LocationRectTileSource tileSource = new LocationRectTileSource(
 6         new UriBuilder(@"http://images.cnblogs.com/cnblogs_com/beniao/BingMaps/China0.jpg").Uri.ToString(),
 7         new LocationRect(new Location(60, 60), new Location(13, 140)),
 8         new Range<double>(1, 16));
 9     tileLayer.TileSources.Add(tileSource);
10     tileLayer.Opacity = 0.9;
11     myMap.Children.Add(tileLayer);
12     this.myMap.ViewChangeOnFrame += delegate(object sender, Microsoft.Maps.MapControl.MapEventArgs e)
13     {
14         double longitude = this.myMap.Center.Longitude;
15         double latitude = this.myMap.Center.Latitude;
16 
17         this.tbLatitude.Text = latitude.ToString();
18         this.tbLongitude.Text = longitude.ToString();
19     };
20     this.myMap.Mode = new MercatorMode();
21 }

  通过上面4---11行代码,实现通过Tile System加载一张图片到地图显示出来,通过运行程序可以发现,同一张图片在设置的地图界面上显示出了多张,这是为什么呢?就是上面所声明是:“地图的不同放大级别(ZoomLabel)的界面上显示的效果是又不同的多张图片组成”,为了证实这一点我们可以通过HttpWatch等工具查看到详细的http请求响应数据:

      

      

  在本文开头部分提到,Bing Maps地图数据就是通过Tile System编码映射将不同的图片组合在一起形成的一套完整的图片系统。下面我们将上面加载图片的地址修改下,比如加载中国地区的Bing Maps,首先我们需要找到中国地图所对应的Bing Maps的Tile System映射Url(可通过HttpWatch工具在http://cn.bing.com/得到)。

      


 1 namespace UseTileLayers
 2 {
 3     public partial class MainPage : UserControl
 4     {
 5         public MainPage()
 6         {
 7             InitializeComponent();
 8             //初始化一个Uri对象,指向中文必应地图的Tile系统
 9             UriBuilder tileSourceUri = new UriBuilder("http://r2.tiles.ditu.live.com/tiles/r{quadkey}.png?g=41");
10 
11             MapTileLayer tileLayer = new MapTileLayer(); //初始化一个图层
12             LocationRectTileSource tileSource = new LocationRectTileSource(
13             tileSourceUri.Uri.ToString(),
14             new LocationRect(new Location(60, 60), new Location(13, 140)),
15                 //初始化LocationRectTileSource对象,设定显示范围及放大级别
16             new Range<double>(1, 16));
17             tileLayer.TileSources.Add(tileSource); //指定图层的TileSource
18             tileLayer.Opacity = 0.9;
19             myMap.Children.Add(tileLayer); //将图层叠加在地图上
20 
21             this.myMap.ViewChangeOnFrame += delegate(object sender, Microsoft.Maps.MapControl.MapEventArgs e)
22             {
23                 double longitude = this.myMap.Center.Longitude;
24                 double latitude = this.myMap.Center.Latitude;
25 
26                 this.tbLatitude.Text = latitude.ToString();
27                 this.tbLongitude.Text = longitude.ToString();
28             };
29             this.myMap.Mode = new MercatorMode();
30         }
31     }
32 }

      

相关说明

本文属学习笔记文章,愿与有志者共同学习交流。欢迎转载,但请在明显地位标记本文的原文连接。

作      者:Beniao     Bing Maps开发群:75662563

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

 
 

【Silverlight】Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System)的更多相关文章

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

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

  2. 【Silverlight】Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps

    [Silverlight]Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps 上个月微软必应地图(Bing Maps) ...

  3. 【Silverlight】Bing Maps学习系列(六):使用扩展模式(Extended Modes)(转)

    [Silverlight]Bing Maps学习系列(六):使用扩展模式(Extended Modes) 微软Bing Maps推出有有段时间了,通过不断的改进和新的地图更新,现在已经基本上形成了一套 ...

  4. 【Silverlight】Bing Maps学习系列(五):绘制多边形(Polygon)图形(转)

    [Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...

  5. 【Silverlight】Bing Maps学习系列(四):使用图钉层(Pushpin layer)及地图图层(MapLayer)(转)

    [Silverlight]Bing Maps学习系列(四):使用图钉层(Pushpin layer)及地图图层(MapLayer) 如果我们需要在Bing Maps中加入一个小图钉标记,该如何实现了? ...

  6. 【Silverlight】Bing Maps学习系列(三):如何控制地图

    [Silverlight]Bing Maps学习系列(三):如何控制地图 本篇主要介绍如何对地图的一些常用控制操作,包括地图加载模式.根据精度和纬度定位.变焦程度等. 一.动态设置地图加载模式 在本系 ...

  7. 【Silverlight】Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图(转)

    [Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...

  8. 【Silverlight】Bing Maps学习系列(一):开发前的准备工作

    [Silverlight]Bing Maps学习系列(一):开发前的准备工作 微软推出的Bing Maps地图引擎,对外开放了Silverlight和Ajax两种客户端API,同时微软针对全球地图还推 ...

  9. 前端学习 第七弹: Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

随机推荐

  1. 79-Envelopes,包络指标.(2015.7.1)

    Envelopes 包络指标 观井映天 2015.7.1

  2. 【BZOJ 1202】 [HNOI2005]狡猾的商人(枚举区间也可行)

    题链:http://www.lydsy.com/JudgeOnline/problem.php?id=1202 其实也可以不使用加权并查集,通过画图可以发现,一个长区间和其包含的区间能够算出一个新区间 ...

  3. [转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示

    我们知道在html中显示图片一般都是用img控件标签,当然调整大小的也很容易. 但是会出现,特定的img大小,显示一张比较大尺寸的且长宽比例与特定img大小不相符的图片.而导致压缩问题,图片挤压的很严 ...

  4. Shader Wave

    Shader Wave 一.原理 1. 采用 UV 坐标为原始数据,生成每一条波浪线. 2. 使用 Unity 的 Time.y 作为时间增量,动态变换波形. 二.操作步骤 1. 首先使用纹理坐标生成 ...

  5. 最详细的JavaWeb开发基础之java环境搭建(Mac版)

    阅读文本大概需要 5 分钟. 我之前分享过在 Windows 下面配置 Java 环境,这次给大家带来的是 Mac 下面安装配置 Java 环境.首先 Mac 系统已经带有默认的 Java,但是由于使 ...

  6. 配置bean

    [bean配置] 在XML文件中通过bean节点来配置bean <!-- 配置bean class: bean的全类名,通过反射的方式在IOC容器中创建bean,所以要求bean中必须有无参的构 ...

  7. Codeforces Round #364 (Div. 2),只有A与B

    A. Cards time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  8. 怎样签发SSL证书

    最近在做怎样让网站有SSL,搞了一天,现在总结一下 首先要安装OPENSSL和 Java的 keytool 先用OPENSSL生成私钥和CSR openssl req -newkey rsa:2048 ...

  9. IE & table & border & border-collapse & bug

    shit IE table border bug & border-collapse bug > `border-collapse: collapse;` table { width: ...

  10. [luoguP1086] 花生采摘(模拟)

    传送门 模拟... 代码 #include <cstdio> #include <iostream> #include <algorithm> #define ab ...