【Silverlight】Bing Maps開發應用與技巧一：地圖打點與座標控制項（CoordControl）

　　使用Bing Maps Silverlight Control開發中，很多時候都需要實現在的地圖上打點的功能，也就是通過滑鼠點擊事件處理當前地圖上點擊點添加一個標註（比釘），主要使用ViewportPointToLocation方法進行座標轉換，將滑鼠所點擊點的物理座標轉化為地理座標（經度、緯度），該方法如下定義：

[ScriptableMemberAttribute] 
public override Location ViewportPointToLocation (Point viewportPoint)
{}

 

　　滑鼠在地圖上點擊會觸發一系列的地圖滑鼠事件（MapMouseEventArgs）,通過該事件的事件參數可以直接或擷取到滑鼠當前點擊點的物理座標，該事件類別定義如下：

namespace Microsoft.Maps.MapControl
{
    public class MapMouseEventArgs : MapEventArgs
    {
        public MapMouseEventArgs(Point viewportPoint);
        
        [ScriptableMember]
        public Point ViewportPoint { get; }
    }
}

 

　　瞭解了以上兩個關鍵點後就可以實現在地圖上打點的功能了，比如我們通過按一下滑鼠事件來處理，當滑鼠在地圖上單擊的時候實現打點，代碼如下：

protected void map_MouseClick(object sender, MapMouseEventArgs e)
{
    //初始化一個表徵圖
    Pushpin pushpin = new Pushpin(); 
    //設定圖釘對象的定位座標
    pushpin.Location = map.ViewportPointToLocation(e.ViewportPoint);
    //添加圖釘到地圖上
    map.Children.Add(pushpin); 
}

 

　　　　　　　　

 

　　最近不少朋友問我Bing Maps Silverlight Control怎麼沒有和DeepEarth中提供的用於顯示當前滑鼠所在的地理位置（經度、緯度）的顯示控制項，在DeepEarth中我叫它座標控制項（CoordControl）。在Bing Maps Silverlight Control中確實沒有座標控制項（CoordControl），但是Bing Maps Silverlight Control為我們提供了非常靈活的編程模型架構，可以通過擴充自己開發出這樣的控制項。

 

　　首先為座標顯示控制項設計一個外觀效果，使用Border布局，並設定了其水平靠右，垂直靠底對齊。如下所示：

<Border Background="#FF000000" CornerRadius="8,8,8,8" Padding="0,8,0,8" Opacity="0.68" MinWidth="190" MinHeight="30"
        HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,5,30">
    <TextBlock x:Name="Coords" HorizontalAlignment="Center" TextWrapping="Wrap" Foreground="White"/>
</Border>

 

　　如上的控制項介面設計，其中使用了一個Coords的TextBlock控制項來顯示當前滑鼠指標所在的地理座標，通過Map對象的MouseMove事件來實現座標的顯示：

protected void map_MouseMove(object sender, MouseEventArgs e)
{
    Point viewportPoint = e.GetPosition(map);
    Location location;
    if (map.TryViewportPointToLocation(viewportPoint, out location))
    {
        Coords.Text = String.Format("座標: {0:f6},{1:f6}", location.Longitude, location.Latitude);
    }
}

 

　　　　　　　　

 

　　以上是直接在Map所在頁面實現的，我們也可以將其封裝為Silverlight使用者控制項，具體實現就是將上面的Border布局的介面那一堆代碼移植到Silverlignt UserControl中去，如下XAML代碼塊：

<UserControl x:Class="BingMapsTraining.UIComponents.CoordControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot">
        <Border Background="#FF000000" CornerRadius="8,8,8,8" Padding="0,8,0,8" Opacity="0.68" MinWidth="190" MinHeight="30"
                HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,5,30">
            <TextBlock x:Name="Coords" HorizontalAlignment="Center" TextWrapping="Wrap" Foreground="White"/>
        </Border>
    </Grid>
</UserControl>

 

　　接下來需要重載或是改寫該控制項的構造方法，讓外部調用的時候傳遞一個Map對象參數，在構造方法裡實現對Map對象的MouseMove事件的監聽處理。

public partial class CoordControl : UserControl
{
    private CoordControl()
    {
        InitializeComponent();
    }

    public CoordControl(Map MapInstance)
        : this()
    {
        if (MapInstance != null)
        {
            MapInstance.MouseMove += (sender, e) =>
                {
                    Point viewportPoint = e.GetPosition(MapInstance);
                    Location location;
                    if (MapInstance.TryViewportPointToLocation(viewportPoint, out location))
                    {
                        Coords.Text = String.Format("座標: {0:f6},{1:f6}", location.Longitude, location.Latitude);
                    }
                };
        }
    }
}

 

　　通過上面的方式將座標控制項進行封裝後，調用就更加簡單，只需要執行個體化一個對象作為一個Silverlight子項目並將其添加到版面配置容器中就行了，如下代碼：

LayoutRoot.Children.Add(new CoordControl(this.map));

 

 

　　推薦博文：

　　【Silverlight】Bing Maps開發系列文章

      MSDN:http://msdn.microsoft.com/en-us/library/ee681890.aspx

　　官方：http://www.microsoft.com/maps

　　中國Bing Maps:http://cn.bing.com/ditu/

　　官方SDK：http://www.microsoft.com/maps/isdk/silverlight/

 

 

著作權說明

  本文屬原創文章，歡迎轉載且註明文章出處，其著作權歸作者和部落格園共有。  

  作      者：Beniao

 文章出處：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/