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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.