[玩转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  阅读(5255)  评论(12)  编辑  收藏  举报