Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手-阿里云开发者社区

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手

2017-11-26 1251

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

在MIX08上，Chris Pendlenton演示了一款Silverlight地图控件，给大家留下了深刻的印象。时隔一年，在MIX09上，微软终于发布了这款名叫“Virtual Earth Silverlight Map Control”的Silverlight控件技术预览版。

Virtual Earth Silverlight Map Control将Virtual Earth融入了Silverlight，使开发者不必再去使用大量麻烦的Javascript API来开发Virtual Earth应用了。除此之外，它还具有以下优点：

对数据和地图进行动画开发；
可缩放的界面，包括将来的移动版；
深入整合视频、音频和图像，不仅仅是弹出层；
支持自定义主题的地图控件；
跨浏览器支持，不再需要考虑 CSS Hack 和跨浏览器的 JavaScript 问题。

这个控件的应用非常简单。下面我们就打开Visual Studio 2008,随便试试吧！

效果图：（围观链接：http://azuredrive.blob.core.windows.net/netdrive1/file_e31368a2-988b-4429-b75b-2eb865185c76.html 注：该控件是同时支持Silverlight 2.0和3.0的，但本例中我使用了3.0）

第一步：打开VS2008，新建Silverlight项目。(2.0与3.0的Silverlight Tools均可)

第二步：添加对Microsoft.VirtualEarth.MapControl.dll的引用。

Microsoft.VirtualEarth.MapControl.dll位于Virtual Earth Silverlight Map Control (CTP) SDK安装路径内。

第三步：在Silverlight的MainPage.xaml(2.0中是Page.xaml)中插入地图控件。

 
<UserControl x:Class="SilverlightApplication1.Page"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:m="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl">
     <Grid x:Name="LayoutRoot" Background="White">
         <m:Map/>
     </Grid>
 </UserControl>

如果你F5运行它的话，你已经可以看到Virtual Earth地图呈现在你的Silverlight项目里了。我们还要做更多。

第四步：拖入一些简单的控件。

 
   
 
<UserControl x:Class="SLLiveEarthControl.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:VirtualEarth="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"
     Width="700" Height="500">
     <Grid x:Name="LayoutRoot" Background="White">
         <Grid.RowDefinitions>
             <RowDefinition Height="*" />
             <RowDefinition Height="40" />
             <RowDefinition Height="40" />
         </Grid.RowDefinitions>
         <VirtualEarth:Map x:Name="viewMap" Mode="AerialWithLabels"  Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Padding="5"
                View="29.544,106.518,0.0000 14.0000 0.0000"  MouseDoubleClick="MapWithImages_MouseDoubleClick" />
         <StackPanel Orientation="Horizontal" Opacity="0.7" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center">
             <Button x:Name="btnNorthAmerica" Click="ChangeMapView_Click" Tag="39.89341,116.33235,0.0000 14.0000 0.0000"
                      Margin="5" Height="20" >
                 <TextBlock>北京</TextBlock>
             </Button>
             <Button x:Name="btnChengdu" Click="ChangeMapView_Click" Tag="30.67,104.074,0.0000 14.0000 0.0000" Margin="5" Height="20" >
                 <TextBlock>成都</TextBlock>
             </Button>
             <Button x:Name="btnShanghai" Click="ChangeMapView_Click" Tag="31.10,121.411,0.0000 13.0000 0.0000" Margin="5" Height="20" >
                 <TextBlock>上海</TextBlock>
             </Button>
             <Button x:Name="btnVancouver" Click="ChangeMapView_Click" Tag="29.544,106.518,0.0000 14.0000 0.0000" Margin="5" Height="20" >
                 <TextBlock>重庆</TextBlock>
             </Button>
 
 
         </StackPanel>
         <StackPanel Orientation="Horizontal" Opacity="0.9" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center">
             <TextBlock Text="双击地图可以添加图钉。               更改经纬度后可点击Fly to换位置. " Padding="5" Foreground="Red"   Width="178"TextWrapping="Wrap"/>
             <TextBlock Text="Latitude: " Padding="12" Foreground="Red" />
             <TextBox x:Name="txtLatitude" Text=""  Height="20" />
             <TextBlock Text="Longitude: " Padding="12" Foreground="Red"   />
             <TextBox x:Name="txtLongitude" Text=""   Height="20"  />
             <Button x:Name="btnFlyto" Click="btnFlyto_Click" Foreground="Red"  Margin="5" Height="20" >
                 <TextBlock>Fly to</TextBlock>
             </Button>
         </StackPanel>
     </Grid>
 </UserControl> 
   
 

第五步：写后台代码。

 
   
 
using System;
 using System.Windows;
 using System.Windows.Controls;
 using System.Globalization;
 using Microsoft.VirtualEarth.MapControl;
 using Microsoft.VirtualEarth.MapControl.Design;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 
 
 namespace SLLiveEarthControl
 {
     public partial class MainPage : UserControl
     { 
          LocationConverter locConverter = new LocationConverter();
         // Converts the Button's location Tag to a map view..
         MapViewSpecificationConverter viewConverter = new MapViewSpecificationConverter();
         private MapLayer imageLayer = new MapLayer();
 
         public   MainPage()
         {
             InitializeComponent();
             viewMap.AddChild(imageLayer);
             viewMap.ViewChangeOnFrame += new EventHandler<MapEventArgs>(viewMap_ViewChangeOnFrame);
             viewMap.AnimationLevel = AnimationLevel.Full;
         }
 
         private void viewMap_ViewChangeOnFrame(object sender, MapEventArgs e)
         {
             Map map = sender as Map;
             if (map != null)
             {
                 MapViewSpecification mapViewSpec = map.View;
 
                 // 根据地图当前的状态动态改变txtLatitude和txtLongitude的值
                 txtLatitude.Text = string.Format(CultureInfo.InvariantCulture, 
                     "{0:F5}", mapViewSpec.Center.Latitude);
                 txtLongitude.Text = string.Format(CultureInfo.InvariantCulture, 
                     "{0:F5}", mapViewSpec.Center.Longitude);
             }
         }
 
         private void ChangeMapView_Click(object sender, RoutedEventArgs e)
         {
             viewMap.View = (MapViewSpecification)viewConverter.ConvertFrom(((Button)sender).Tag);
         }
         private void MapWithImages_MouseDoubleClick(object sender, MapMouseEventArgs e)
         {
             e.Handled = true;
             Location pinLocation =  viewMap.ViewportPointToLocation(e.ViewportPoint);
             Image pin = new Image();
             Random r = new Random();
             pin.Source = new BitmapImage(new Uri(r.Next() % 2==0 ? "female.png" : "male.png", UriKind.RelativeOrAbsolute));
             pin.Stretch = Stretch.None;
             imageLayer.AddChild(pin, pinLocation, PositionMethod.BottomCenter);
         }
 
         private void btnFlyto_Click(object sender, RoutedEventArgs e)
         {
             viewMap.View = new MapViewSpecification(new Location(Double.Parse(txtLatitude.Text), Double.Parse(txtLongitude.Text)), 14);
         }
     }
 }
  
   
 