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

    image 

    第一步:打开VS2008,新建Silverlight项目。(2.0与3.0的Silverlight Tools均可)未命名1 未命名2

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

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

    未命名3

    第三步:在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项目里了。我们还要做更多。

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

    image 

    <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
    );
            }

        }

    }

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

    __________________________________

    附件:

    本例代码下载:SLLiveEarthControl.rar

  • 相关阅读:
    (转) 网络流之最大流算法(EdmondsKarp)
    如何在面试中发现优秀程序员
    Java中Volatile关键字详解
    比AtomicLong还高效的LongAdder 源码解析
    AtomicInteger的用法
    synchronized详解
    Java内部锁的可重用性(Reentrancy)
    Java可重入锁
    关于原生javascript的this,this真是个强大的东东
    js时间戳怎么转成日期格式
  • 原文地址:https://www.cnblogs.com/azure/p/1424408.html
Copyright © 2020-2023  润新知