阅读:2754回复:1
Bing Maps进阶系列三:使用地图图像服务(ImageryService)
<P><FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"> 地图图像服务(ImageryService)提供了根据地理位置(经度和纬度)坐标和地图的缩放级别解析出对应于地图图片系统的完整地图数据元数据,包括图片映射地址、图片大小等一系列详细参数。通过该服务的服务接口也可以反向实现通过指定地理位置坐标、地图缩放级别和图片大小(高度和宽度)来生成不同的地图图片。</FONT></P>
<P><FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"></FONT> </P> <P><FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"><STRONG>一、添加ImageryService的Web服务引用</STRONG></FONT></P> <P> <FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New">微软发布的地图图像服务地址是:<a href="http://dev.virtualearth.net/webservices/v1/imageryservice/ImageryService.svc" target="_blank" ><FONT color=#78afd3>http://dev.virtualearth.net/webservices/v1/imageryservice/ImageryService.svc</FONT></A>,在项目中通过该地址添加Web服务引用后就可以使用地图图像服务中的方法进行</FONT></P> <P><FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"></FONT> <FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"><IMG src="http://images.cnblogs.com/cnblogs_com/beniao/BingMaps/ImageryService.jpg" border=0></FONT></P> <P><FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"></FONT> </P> <P> <FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New">如上图示成功添加地图图像服务(ImageryService)后就可以使用该服务所提供的功能了,可以添加Web服务引用向导过程中生成的WCF客户端配置查看到Silverlight访问该服务的客户端完整配置信息,如下代码:</P> <DIV class=cnblogs_code> <DIV><!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><configuration><BR> <system.serviceModel><BR> <bindings><BR> <basicHttpBinding><BR> <binding name="BasicHttpBinding_IImageryService" maxBufferSize="2147483647"<BR> maxReceivedMessageSize="2147483647"><BR> <security mode="None"><BR> <transport><BR> <extendedProtectionPolicy policyEnforcement="Never" /><BR> </transport><BR> </security><BR> </binding><BR> </basicHttpBinding><BR> </bindings><BR> <client><BR> <endpoint address="http://dev.virtualearth.net/webservices/v1/imageryservice/imageryservice.svc"<BR> binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IImageryService"<BR> contract="ImageryService.IImageryService" name="BasicHttpBinding_IImageryService" /><BR> </client><BR> </system.serviceModel><BR></configuration><BR></DIV></DIV> <P><STRONG>二、Silverlight界面布局设计</STRONG></FONT></P> <P> 在Silverlight的界面上提供三个TextBox用于录入经度、纬度和缩放级别值,通过按钮请求调用ImageryService服务接口。</P> <P><FONT style="BACKGROUND-COLOR: #f5f5f5" face="Courier New"></FONT></P> <DIV class=cnblogs_code> <DIV><!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><FONT face="Courier New"><Grid x:Name="LayoutRoot"></FONT><BR><FONT face="Courier New"><m:Map CredentialsProvider="AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU" x:Name="map"></m:Map></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><Border BorderBrush="Gray" BorderThickness="3,3,3,3"</FONT><FONT face="Courier New"> <BR> Margin="3,3,3,3" HorizontalAlignment="Right"</FONT><FONT face="Courier New"> <BR> Opacity="0.78" Height="160" Background="#A82D2D2D"</FONT><BR><FONT face="Courier New"> VerticalAlignment</FONT><FONT face="Courier New">="Top" CornerRadius="5,5,5,5"></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><StackPanel Orientation="Vertical"></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><StackPanel Orientation="Horizontal" Margin="3,3,3,3"></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBlock Text="经度:"></TextBlock></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBox x:Name="tbLongitude" Width="130"></TextBox></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBlock Text="纬度:"></TextBlock></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBox x:Name="tbLatitude" Width="130"></TextBox></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBlock Text="缩放级别:"></TextBlock></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBox x:Name="tbZoomLevel" Width="30"></TextBox></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><Button x:Name="btnImageMetadata" Click="btnImageMetadata_Click" Content="获取图片映射地址" Margin="3"></Button></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"></StackPanel></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><StackPanel Orientation="Horizontal" Margin="3,3,3,3"></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBlock Text="映射地址:"></TextBlock></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBox x:Name="tbMetadataResult" Width="500"></TextBox></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"></StackPanel></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><StackPanel Orientation="Horizontal" Margin="3,3,3,3"></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBlock Text="图片高度:"></TextBlock></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBox x:Name="tbHeight" Width="150"></TextBox></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBlock Text="图片宽度:"></TextBlock></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"><TextBox x:Name="tbWidth" Width="150"></TextBox></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"></StackPanel></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"></StackPanel></FONT><BR><FONT face="Courier New"> </FONT><FONT face="Courier New"></Border></FONT><BR><FONT face="Courier New"></Grid></FONT></DIV></DIV> <P><STRONG> 三、调用ImageryService服务获取地图元数据</STRONG></P> <P> 地图图像服务(ImageryService)提供了接口实现通过地图位置经度和纬度以及地图缩放级别获取对应于地图图片系统(Tile System)的地图数据的详细信息,包括地图图片对应的Tile映射地址,图片的高度和宽度,请求图片的时间等一些列参数值,通过前面的操作以及成功添加了对ImageryService的Web服务引用,接下来只需要简单的调用服务接口就可以获取到这些数据。</P> <DIV class=cnblogs_code> <DIV><!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><FONT face="Courier New">private void btnImageMetadata_Click(object</FONT><FONT face="Courier New"> sender, RoutedEventArgs e)<BR>{<BR> //构造服务请求对象</FONT><BR><FONT face="Courier New"> var request = new</FONT><FONT face="Courier New"> ImageryMetadataRequest();<BR> request.Credentials = new</FONT><FONT face="Courier New"> Microsoft.Maps.MapControl.Credentials();<BR> request.Credentials.ApplicationId = "AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU"</FONT><FONT face="Courier New">;<BR><BR> //设置地理位置经度、纬度和地图缩放级别,从界面控件收集值</FONT><BR><FONT face="Courier New"> var location = new Location(double.Parse(this.tbLatitude.Text), double.Parse(this</FONT><FONT face="Courier New">.tbLongitude.Text));<BR> request.Options = new</FONT><FONT face="Courier New"> ImageryMetadataOptions();<BR> request.Options.Location =</FONT><FONT face="Courier New"> location;<BR> request.Options.ZoomLevel = int.Parse(this</FONT><FONT face="Courier New">.tbZoomLevel.Text);<BR> request.Style =</FONT><FONT face="Courier New"> MapStyle.AerialWithLabels;<BR><BR> //构造ImageryService客户端代理对象实例</FONT><BR><FONT face="Courier New"> var client = new</FONT><FONT face="Courier New"> ImageryServiceClient();<BR> client.GetImageryMetadataCompleted += (o, args) => //处理请求的响应接口</FONT><BR><FONT face="Courier New"> {<BR> if (args.Error == null</FONT><FONT face="Courier New">)<BR> {<BR> var response =</FONT><FONT face="Courier New"> args.Result;<BR> this.tbMetadataResult.Text = response.Results[0</FONT><FONT face="Courier New">].ImageUri.ToString();<BR> this.tbHeight.Text = response.Results[0</FONT><FONT face="Courier New">].ImageSize.Height.ToString();<BR> this.tbWidth.Text = response.Results[0</FONT><FONT face="Courier New">].ImageSize.Width.ToString();<BR> }<BR> };<BR><BR> //发起异步调用</FONT><BR><FONT face="Courier New"> client.GetImageryMetadataAsync(request);<BR>}</FONT></DIV> <IMG src="http://images.cnblogs.com/cnblogs_com/beniao/BingMaps/ImageryService1.jpg" border=0></DIV> <P> 从上图可看出,通过指定的地理经度、纬度和地图缩放级别参数调用ImageryService服务接口,返回了一个地址“<a href="http://t0.tiles.virtualearth.net/tiles/h1320.jpeg?g=409;mkt={culture};token={token" target="_blank" ><FONT color=#78afd3>http://t0.tiles.virtualearth.net/tiles/h1320.jpeg?g=409;mkt={culture};token={token</FONT></A>}”,该地址就是地理位置(经度:97.1964042859709,纬度:37.5939128813461),地图缩放级别为:4所对应的地图图片系统(Tile System)的地图数据映射Url,通过在浏览器中执行该Url可查看该Url对应的具体图片效果,如下图示:</P> <P> <IMG src="http://images.cnblogs.com/cnblogs_com/beniao/BingMaps/ImageryService2.jpg" border=0></P> <P> 上面获取到的是带地名的卫星地图,因为设置的样式是:request.Style = MapStyle.AerialWithLabels。可以通过MapStyle枚举设置不同的请求样式,比如要获取道路模式的地图则如下设置:</P> <DIV class=cnblogs_code> <DIV><!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><FONT face="Courier New">request.Style = MapStyle.Road;</FONT></DIV></DIV> <P> 在次通过上面获取卫星地图的地理位置坐标经度和纬度值获取下来的Url为:<a href="http://t0.tiles.virtualearth.net/tiles/r1320.jpeg?g=409;mkt={culture};shading=hill;token={token" target="_blank" ><FONT color=#78afd3>http://t0.tiles.virtualearth.net/tiles/r1320.jpeg?g=409;mkt={culture};shading=hill;token={token</FONT></A>},其显示效果为下图所示:</P> <P> <IMG src="http://t0.tiles.virtualearth.net/tiles/r1320.jpeg?g=409;mkt={culture};shading=hill;token={token}" border=0> </P> <P><STRONG>四、调用ImageryService生成图片</STRONG></P> <P> 地图图片服务(ImageryService)也提供了服务接口反向实现通过指定地理位置坐标、地图缩放级别和图片大小(高度和宽度)来生成图片。这个服务接口最终将请求转向到一个HTTP处理程序,用来根据不同的参数值生成不同的图片数据,该HTTP处理程序的请求格式:“<a href="http://api.tiles.virtualearth.net/api/GetMap.ashx?c=纬度,经度;w=宽度;h=高度;b=h,mkt.en-US;z=4;token={token" target="_blank" ><FONT color=#78afd3>http://api.tiles.virtualearth.net/api/GetMap.ashx?c=纬度,经度;w=宽度;h=高度;b=h,mkt.en-US;z=4;token={token</FONT></A>}”。</P> <P> 比如我们需要以中国地区地图坐标为准,生成一张地图缩放级别为10,图片高度和宽度为512的一张图片,那么完整的http请求串就应该是这样的:<a href="http://api.tiles.virtualearth.net/api/GetMap.ashx?c=35.0521567883562,100.81816585252;w=512;h=512;b=h,mkt.en-US;z=4;token={token" target="_blank" ><FONT color=#78afd3>http://api.tiles.virtualearth.net/api/GetMap.ashx?c=35.0521567883562,100.81816585252;w=512;h=512;b=h,mkt.en-US;z=4;token={token</FONT></A>}</P> <P> 当然绝大多数情况下我们是不知道这个处理程序的路径的,只有通过调试程序才能发现最终是将请求转向到了此处理程序去完成的生成图片功能。我们在做开发的时候其实只需要关注ImageryService这个WCF服务的调用就OK了。那么要实现生成图片我们可以通过ImageryService所提供的GetMapUri()方法实现,代码如下:</P> <DIV class=cnblogs_code> <DIV><!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><FONT face="Courier New">private void btnGetUrl_Click(object</FONT><FONT face="Courier New"> sender, RoutedEventArgs e)<BR>{<BR> var request = new</FONT><FONT face="Courier New"> MapUriRequest(); <BR> request.Credentials = new</FONT><FONT face="Courier New"> Microsoft.Maps.MapControl.Credentials();<BR> request.Credentials.ApplicationId = "AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU"</FONT><FONT face="Courier New">;<BR><BR> request.Center = new Location(35.0521567883562,100.81816585252</FONT><FONT face="Courier New">);<BR> var opt = new</FONT><FONT face="Courier New"> MapUriOptions();<BR> opt.Style =</FONT><FONT face="Courier New"> MapStyle.AerialWithLabels;<BR> opt.ZoomLevel = 4</FONT><FONT face="Courier New">;<BR> opt.ImageSize = new</FONT><FONT face="Courier New"> SizeOfint();<BR> opt.ImageSize.Height = (int</FONT><FONT face="Courier New">)imgMap.Height;<BR> opt.ImageSize.Width = (int</FONT><FONT face="Courier New">)imgMap.Width;<BR><BR> request.Options =</FONT><FONT face="Courier New"> opt;<BR><BR> var client = new</FONT><FONT face="Courier New"> ImageryServiceClient();<BR> client.GetMapUriCompleted += (o, args) =></FONT><BR><FONT face="Courier New"> {<BR> var response </FONT><FONT face="Courier New">=</FONT><FONT face="Courier New"> args.Result;<BR> imgMap.Source = new BitmapImage(new</FONT><FONT face="Courier New"> Uri(response.Uri, UriKind.RelativeOrAbsolute));<BR> };<BR> client.GetMapUriAsync(request);<BR>}</FONT></DIV></DIV> <P> 上面代码段里使用了imgMap控件,这是在界面上放置的一个Image控件,通过按钮发起ImageryService的服务接口的调用,将返回的串序列为位图数据赋值给Image控件显示出来,其定义如下:</P> <DIV class=cnblogs_code> <DIV><!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><FONT face="Courier New"><Image x:Name="imgMap" Width="512" Height="512"></Image></FONT></DIV></DIV> <P> 通过上面的实现最终生成的图片效果如下图所示:</P> <P> <IMG src="http://api.tiles.virtualearth.net/api/GetMap.ashx?c=35.0521567883562,100.81816585252;w=512;h=512;b=h,mkt.en-US;z=4;token={token}" border=0></P> <P> 如果您想了解更多关于Bing Maps地图服务的知识,请查询:</P> <P> MSDN:<a href="http://msdn.microsoft.com/en-us/library/cc980922.aspx" target="_blank" ><FONT color=#78afd3>http://msdn.microsoft.com/en-us/library/cc980922.aspx</FONT></A> </P> <P> Bing Maps开发站:<a href="http://www.microsoft.com/maps/developers/" target="_blank" ><FONT color=#78afd3>http://www.microsoft.com/maps/developers/</FONT></A></P> <P> Bing Maps开发SDK:<a href="http://msdn.microsoft.com/en-us/library/dd877180.aspx" target="_blank" ><FONT color=#78afd3>http://msdn.microsoft.com/en-us/library/dd877180.aspx</FONT></A></P> |
|
|
1楼#
发布于:2010-05-17 15:53
<img src="images/post/smile/dvbbs/em01.gif" /><img src="images/post/smile/dvbbs/em01.gif" /><img src="images/post/smile/dvbbs/em01.gif" /><img src="images/post/smile/dvbbs/em01.gif" /><img src="images/post/smile/dvbbs/em01.gif" /><img src="images/post/smile/dvbbs/em01.gif" />
|
|