[玩转Silverlight]第五回:应用篇,在Silverlight中使用Virtual Earth地图服务

《你必须知道的.NET》网站 | Anytao技术博客 

[玩转Silverlight]第五回:应用篇,在Silverlight中使用Virutal Earth地图服务

发布日期:2009.03.29 作者:Anytao
© 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处。

畅游地球是个美好的愿望,随着地图服务的日益完善,我们足不出户畅游全球已变得简单异常。事实上,Google Earth和Virutal Earth已经成为Web服务中的必选目标,为自己的网站加入Earth或者Map地图服务是件非常酷的事情,那么在我们的Silverlight应用中使用地图服务是否能够得心应手呢?

答案是肯定的,我们操作Earth服务只需执行简单的服务调用,就可完成坐地日行八万里的壮举了,而这一切是由VIEWs组件封装了Javascript脚本来完成的,通过对Virtual Earth Service的调用,在Silverlight中使用托管代码完成简单消费。

下面我们来看看这一过程是如何实现的?

必要的准备

必要的准备其实很简单,主要包括:

  • VIEWS.dll,封装了对脚本的处理逻辑类VEMap。
  • ScriptInterop.dll,包含VEMap的基类JSObject。
  • views.js,调用Virtual Earth服务。

对此,我们无需多做解释,在代码中自会由明白的演示。

实现的过程

  • 创建Silverlight项目和Web项目(例如Anytao.SLight.MapAccess和Anytao.SLight.MapAccess.Web),在Silverlight项目中Add Reference VIEW和ScriptInterop程序集,在Web项目中引入views脚本。
  • 在Silverlight宿主页面引入views.js脚本和virtualearth服务脚本
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>    
<script type="text/javascript" src="views.js"></script>
  • 为Virtual Earth创建容器
<div id="myMap" style="position:absolute; width:640px; height:480px; top:105px;"></div>
  • 在Silverlight中添加调用布局
<Grid x:Name="LayoutRoot" Background="Azure">
    <StackPanel Orientation="Vertical" >
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
            <TextBox x:Name="tbPlace" Width="200" Height="30" Text="Beijing" Margin="5" />
            <Button x:Name="btnFind" Width="100" Content="Find" Height="30" Click="btnFind_Click" />
        </StackPanel> 
        <HyperlinkButton x:Name="codeload" HorizontalAlignment="Center" Content="Code Download" Margin="10" Click="codeload_Click" />
        <TextBlock HorizontalAlignment="Center" Text="2009, Anytao.com" />
    </StackPanel>
</Grid>
  • 实现具体的调用逻辑
// Release : code01, 2009/03/03                    
// Author  : Anytao, http://www.anytao.com 
// List    : Page.xaml.cs
public partial class Page : UserControl
{
    private VEMap map;
    private VEShapeLayer layer;

    public Page()
    {
        InitializeComponent();

        Loaded += new RoutedEventHandler(Page_Loaded);
        codeload.Content = "Download: " + App.Current.GetType().Namespace;
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        //Create from container
        map = new VEMap("myMap");
        HtmlPage.RegisterScriptableObject("SLMAP", map);

        //Location in Beijing
        VELatLong point = new VELatLong(39.92, 116.46);
        //Loading the earth
        map.LoadMap(point, 11);
    }

    private void btnFind_Click(object sender, RoutedEventArgs e)
    {
        //Find a location
        map.Find(string.Empty, tbPlace.Text);
    }
}
  • OK,大功告成,我们欣赏并搜索自己的地方了,默认情况下我们首先会看得伟大首都的缩影。

当然,还有更多的控制,我们没有演示,大家可以了解了解VEMap提供的服务和接口,相信你能获取更多超酷的地图探索体验。

示例演示

 

参考文献

温故知新

anytao | © 2009 Anytao.com

2009/03/29 | http://anytao.cnblogs.com/ | http://anytao.net/blog/post/2009/03/18/anytao_silverlight_05_usevirtualearth.aspx

本文以“现状”提供且没有任何担保,同时也没有授予任何权利。 | This posting is provided &quotAS IS" with no warranties, and confers no rights.

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

posted @ 2009-03-29 19:34  Anytao  阅读(5239)  评论(12编辑  收藏  举报