【Bing Map學習系列】(6)——如何使用Bing Maps Silverlight Control繪製多邊形

文章目錄

• 三、通過Map控制項進行配置

上一章【Bing Map學習系列】(5)——如何使用圖釘層和地圖層介紹了如何使用圖釘層和地圖層，本章將詳細的介紹如何使用Bing Maps Silverlight Control繪製多邊形。

本文感謝原創：http://www.cnblogs.com/beniao/archive/2009/12/09/1616956.html

Bing Maps Silverlight Control支援使用者自訂繪製多邊形（Polygon）圖形，包括三角形、四邊形（矩形、菱形）、以及其他更多多邊形的圖形繪製。多邊形說簡單點就是一個由多條邊組成的有一定規則的圖形，比如三角形就是由三條邊組成，我們要在地圖上繪製三角形需要知道三個頂點的座標值（精度和緯度），如下代碼塊MainPage.xaml：

<UserControl x:Class="SilverlightApplication1.MainPage"<br /> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br /> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<br /> xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"<br /> xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"<br /> mc:Ignorable="d" d:DesignWidth="500" d:DesignHeight="500"><br /> <Grid x:Name="LayoutRoot" Width="500" Height="500"><br /> <m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" x:Name="map"<br /> Center="34.9294740237661,107.506492025863" ZoomLevel="4" NavigationVisibility="Collapsed"><br /> <m:Pushpin Location="33.845881352,105.165628188471" x:Name="mayPushpin"></m:Pushpin><br /> <m:MapLayer x:Name="myMapLayer"></m:MapLayer><br /> </m:Map><br /> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="180" Height="200" Background="Gray"></p><p> <Button x:Name="btnPolygon" Click="btnPolygon_Click" Content="添加多邊形"></Button><br /> </StackPanel><br /> </Grid><br /></UserControl>

一、繪製三角形

根據上面的Silverlight代碼，在 MainPage.xaml.cs檔案中添加相關的事件即可繪製三角形：

private void btnPolygon_Click(object sender, RoutedEventArgs e)<br />{<br /> MapPolygon polygon = new MapPolygon();<br /> polygon.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Red);<br /> polygon.StrokeThickness = 5;<br /> polygon.Opacity = 0.7;<br /> polygon.Locations = new LocationCollection() {<br /> new Location(34.9294740237661,107.506492025863),<br /> new Location(37.7814222409819, 105.979148275863),<br /> new Location(40.2865067209496, 109.219382650863) };<br /> this.map.Children.Add(polygon);<br />}

MapPolygon就是Bing Maps提供的一個多邊形類，如上代碼塊則實現了在地圖上繪製一個三角形，主要就是利用三個點的座標通過Locations進行定位繪製圖層，效果如下：

相應的如果是繪製四變形也就是多一個頂點的多邊形而已，如下面部分所示。

二、繪製四邊形

根據上面的Silverlight代碼，在 MainPage.xaml.cs檔案中添加相關的事件即可繪製四邊形：

private void btnPolygon_Click(object sender, RoutedEventArgs e)<br /> {<br /> MapPolygon polygon = new MapPolygon();<br /> //填充顏色<br /> polygon.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Red);<br /> polygon.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Yellow);<br /> polygon.StrokeThickness = 5;<br /> polygon.Opacity = 0.7;<br /> polygon.Locations = new LocationCollection() {<br /> new Location(34.9294740237661,107.506492025863),<br /> new Location(37.7814222409819, 105.979148275863),<br /> new Location(40.2865067209496, 109.219382650863),<br /> new Location(29.8104584489867, 115.943992025863)};<br /> this.map.Children.Add(polygon);</p><p> }

如下面所示：

三、通過Map控制項進行配置

除了上面通過代碼動態繪製多邊形外，也可以通過Map控制項進行配置，如下樣本：

<m:Map CredentialsProvider="AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU" x:Name="myMap"<br /> Center="34.9294740237661,107.506492025863" ZoomLevel="4" NavigationVisibility="Collapsed"><br /> <m:MapPolygon Locations="30,108 39,102 34.88,90.021" Fill="Red" StrokeThickness="5" Opacity="0.8"></m:MapPolygon><br /></m:Map><br />

如中紅色的三角形就是通過初始化配置進去的，平時二次開發中使用動態建立相對較多。上面提到四邊形分菱形和矩形，Bing Maps 也提供了專門繪製矩形和菱形的類，比如矩形是Rectangle類。二次開發中經常會涉及到需要自己繪製一些圖形在地圖上，或者是在地圖上動態選擇繪製，瞭解繪製圖形的基本原理後實現這些都非常簡單，實際上就是給Map控制項添加一個子項目，也可以理解為Silverlight的UIElement。