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

在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)

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

第一步:打开VS2008,新建Silverlight项目。(2.0与3.0的Silverlight Tools均可)Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手 Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手

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

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

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

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

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
<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>
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手

 

 

 

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

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

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

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

第五步:写后台代码。

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手using System;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 System.Windows;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 System.Windows.Controls;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 System.Globalization;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 Microsoft.VirtualEarth.MapControl;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 Microsoft.VirtualEarth.MapControl.Design;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 System.Windows.Media;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
using
 System.Windows.Media.Imaging;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
namespace
 SLLiveEarthControl
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手    
public partial class
 MainPage : UserControl
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手    

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手         LocationConverter locConverter 
= new
 LocationConverter();
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
// Converts the Button's location Tag to a map view..

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
        MapViewSpecificationConverter viewConverter = new MapViewSpecificationConverter();
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
private MapLayer imageLayer = new
 MapLayer();
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
public
   MainPage()
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            InitializeComponent();
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            viewMap.AddChild(imageLayer);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            viewMap.ViewChangeOnFrame 
+= new EventHandler<MapEventArgs>
(viewMap_ViewChangeOnFrame);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            viewMap.AnimationLevel 
=
 AnimationLevel.Full;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        }

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
private void viewMap_ViewChangeOnFrame(object sender, MapEventArgs e)
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            Map map 
= sender as
 Map;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            
if (map != null
)
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手                MapViewSpecification mapViewSpec 
=
 map.View;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手                
// 根据地图当前的状态动态改变txtLatitude和txtLongitude的值

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
                txtLatitude.Text = string.Format(CultureInfo.InvariantCulture, 
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手                    
"{0:F5}"
, mapViewSpec.Center.Latitude);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手                txtLongitude.Text 
= string
.Format(CultureInfo.InvariantCulture, 
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手                    
"{0:F5}"
, mapViewSpec.Center.Longitude);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            }

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

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
private void ChangeMapView_Click(object sender, RoutedEventArgs e)
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            viewMap.View 
=
 (MapViewSpecification)viewConverter.ConvertFrom(((Button)sender).Tag);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        }

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
private void MapWithImages_MouseDoubleClick(object sender, MapMouseEventArgs e)
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            e.Handled 
= true
;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            Location pinLocation 
=
  viewMap.ViewportPointToLocation(e.ViewportPoint);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            Image pin 
= new
 Image();
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            Random r 
= new
 Random();
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            pin.Source 
= new BitmapImage(new Uri(r.Next() % 2==0 ? "female.png" : "male.png"
, UriKind.RelativeOrAbsolute));
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            pin.Stretch 
=
 Stretch.None;
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            imageLayer.AddChild(pin, pinLocation, PositionMethod.BottomCenter);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        }

Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
private void btnFlyto_Click(object sender, RoutedEventArgs e)
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        
{
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手            viewMap.View 
= new MapViewSpecification(new Location(Double.Parse(txtLatitude.Text), Double.Parse(txtLongitude.Text)), 14
);
Microsoft Virtual Earth Silverlight Map Control (CTP)快速上手        }

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

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

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

你可能已经注意到,我们在编程时已经完全脱离了Javascript;Virtual Earth在我们的手中,已经变得和TextBox,DataGrid一样,只是一个控制非常方便的控件了。 : )



本文转自 流牛木马 博客园博客,原文链接:http://www.cnblogs.com/azure/archive/2009/03/29/1424408.html,如需转载请自行联系原作者