Bing map Learning Series (6) -- How to Use Bing Maps Silverlight control to draw a polygon

Document directory

• 3. Configure through map control

The previous chapter Bing map Learning Series (5) -- How to Use the graph nail layer and map layer describes how to use the graph nail layer and map layer, this chapter describes in detail how to use Bing Maps Silverlight control to draw a polygon.

Thanks to original: http://www.cnblogs.com/beniao/archive/2009/12/09/1616956.html

Bing Maps Silverlight control allows you to customize polygon images, including triangles, rectangles (rectangles, diamond), and other polygon images. A polygon is a regular Graph composed of multiple edges. For example, a triangle is composed of three edges, to draw a triangle on a map, we need to know the coordinate values (precision and latitude) of the three vertices. The following code block is 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" verticalignment = "bottom" width = "180" Height = "200" background = "gray"> </P> <p> <button X: name = "btnpolygon" Click = "btnpolygon_click" content = "add polygon"> </button> <br/> </stackpanel> <br/> </GRID> <br/> </usercontrol>

I. Draw triangles

Based on the Silverlight code above, add related events to the mainpage. XAML. CS file to draw a triangle:

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 is a polygon class provided by Bing Maps. The above code block creates a triangle on a map. It uses coordinates of three points to locate and draw layers through locations. The effect is as follows:

If it is to draw a four deformation, that is, a polygon with more than one vertex, as shown in the following section.

Ii. Draw a quadrilateral

Based on the Silverlight code above, add related events to the mainpage. XAML. CS file to draw a quadrilateral:

Private void btnpolygon_click (Object sender, routedeventargs e) <br/>{< br/> mappolygon polygon = new mappolygon (); <br/> // fill color <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>}

As shown below:

3. Configure through map control

In addition to the code above, you can also use the map control to dynamically draw a polygon, as shown in the following example:

<M: Map credentialsprovider = "example" X: Name = "mymap" <br/> center = "34.9294740237661, 107.506492025863 "zoomlevel =" 4 "navigationvisibility =" Collapsed "> <br/> <m: mappolygon locations =" 30,108 39,102, 90.021 "fill =" red "strokethickness =" 5 "opacity =" 0.8 "> </M: mappolygon> <br/> </M: Map> <br/>

For example, the red triangle is configured through initialization. In normal times, there are many dynamic creation methods in secondary development. As mentioned above, the quadrilateral is divided into diamond and rectangle. Bing Maps also provides a class for drawing a rectangle and a diamond. For example, a rectangle is a rectangle class. Secondary Development usually involves drawing some images on the map, or dynamically selecting and drawing on the map. It is very easy to understand the basic principles of drawing images, it is actually to add a child element to the map control, which can also be understood as the uielement of Silverlight.