ArcGIS API for Silverlight (4): a bridge between users and geographical information-GraphicsLayer

When we interact with a map, we perform the following operations: a drop-down box or a query of the map content. Input and Output in these interactions are usually reflected on a layer independent of map data. For example, if the frame is enlarged, we can see a rectangle drawn by the mouse, or query the point of interest, the result is usually to highlight the shape of the interest point that meets the condition in the independent "layer", through which the user's input can be reflected, and the map output can be displayed. This "layer" is GraphicsLayer.
In fact, the concept of GraphicsLayer also exists in the development of the ADF. GraphicsLayer can also be found in the APIs of the other two clients (JavaScript/Flex). They are all the same.
This section describes how to display the content in GraphicsLayer. Of course, the first job is to add ESRI. ArcGIS. dll reference and introduce the xml namespace of esri. Next, add a GraphicsLayer layer Layer in Map:

1. <Esri: Map x: Name = "Map1">
2. <Esri: Map. Layers>
3. <! -- Other layers -->
4. <Esri: GraphicsLayer ID = "GLayer"/>
5. </Esri: Map. Layers>
6. </Esri: Map>

Copy code

To keep the content in GraphicsLayer at the top (not covered by other layers), place it at the bottom of the Map label, as shown above. From the naming, we can easily see that the GraphicLayer contains a set of Graphic. Graphic (ESRI. arcGIS. graphic) is the basic element in GraphicsLayer, which includes Geometry (in ESRI. arcGIS. geometry namespace), Symbol (in ESRI. arcGIS. in the Symbol namespace), Attributes, and other Attributes. All vector elements displayed on a map have a Geometry, which contains several geographical coordinates used to display the shape of objects on the map. It is a general term for Point, Polyline, and Polygon, it represents the shape of Graphic. Symbol represents the appearance of Graphic. It is a general term for a series of symbols. We usually deal with SimpleMarkerSymbol, SimpleLineSymbol, and SimpleFillSymbol. They correspond to the three different Geometry (Point, Polyline, polygon ).
To display a Graphic in three steps:
1. Define Graphic:
In xaml

1. <Esri: Graphic>
2. </Esri: Graphic>

Copy code

In code-behind
Graphic g = new Graphic ()
2. Set the Geometry and Symbol attributes of Graphic:
In xaml

1. <Esri: Graphic>
2. <Esri: Graphic. Symbol>
3. <EsriSymbols: SimpleMarkerSymbol Color = "Blue" Size = "12" Style = "Square"/>
4. </Esri: Graphic. Symbol>
5. <EsriGeometry: MapPoint X = "108" Y = "30"/>
6. </Esri: Graphic>

Copy code

In code-behind

1. Graphic g = new Graphic ()
2. {
3. Geometry = new MapPoint (108, 30 ),
4. Symbol = new SimpleMarkerSymbol ()
5. {
6. Color = new SolidColorBrush (Colors. Blue ),
7. Size = 12,
8. Style = SimpleMarkerSymbol. SimpleMarkerStyle. Square
9. }
10. };

Copy code

3. Add the defined Graphic to GraphicsLayer:
In xaml

1. <Esri: GraphicsLayer ID = "GLayer">
2. <Esri: GraphicsLayer. Graphics>
3. <Esri: Graphic>
4. <Esri: Graphic. Symbol>
5. <EsriSymbols: SimpleMarkerSymbol Color = "Blue" Size = "12" Style = "Square"/>
6. </Esri: Graphic. Symbol>
7. <EsriGeometry: MapPoint X = "108" Y = "30"/>
8. </Esri: Graphic>
9. </Esri: GraphicsLayer. Graphics>
10. </Esri: GraphicsLayer>

Copy code

In code-behind

1. Graphic g = new Graphic ()
2. {
3. Geometry = new MapPoint (108, 30 ),
4. Symbol = new SimpleMarkerSymbol ()
5. {
6. Color = new SolidColorBrush (Colors. Blue ),
7. Size = 12,
8. Style = SimpleMarkerSymbol. SimpleMarkerStyle. Square
9. }
10. };
11. GraphicsLayer glayer = Map1.Layers ["GLayer"] as GraphicsLayer;
12. Glayer. Graphics. Add (g );

Copy code

Let's take a look at the effect:

Download(246.21 KB)

 

There are other images in the figure, except that the Geometry and Symbol attributes of Graphic are changed. The grizzly bear in the figure is an animated file. Using Silverlight, it can define various expressive symbols.
Although the work can be completed completely in xaml, we recommend that you put the definition of the visualization element in xaml and put the logic part of the implementation in code-behind. Let's take a look at the Graphic code in the graph:

1. <Grid. Resources>
2. <EsriSymbols: SimpleMarkerSymbol x: Name = "RedMarkerSymbol" Color = "Red" Size = "12" Style = "Circle"/>
3. <! -- Unfortunately, currently, Silverlight only supports Jpeg and PNG images. Therefore, PictureMarkerSymbol cannot display GIF images; otherwise, an ImagingError error occurs. -->
4. <EsriSymbolsictureMarkerSymbol x: Name = "PinPictureMarkerSymbol" Source = "imgs/pin.png" OffsetX = "10" OffsetY = "10"/>
5. <EsriSymbols: SimpleLineSymbol x: Name = "RedLineSymbol" Color = "Red" Width = "4" Style = "Solid"/>
6. <EsriSymbols: CartographicLineSymbol x: Name = "CartoLineSymbol" Color = "Red" Width = "10" DashCap = "Triangle" LineJoin = "Round" DashArray = "6, 2"/>
7. <EsriSymbols: SimpleFillSymbol x: Name = "RedFillSymbol" Fill = "#66FF0000" BorderBrush = "Red" BorderThickness = "2"/>
8. </Grid. Resources>
10. <MediaElement x: Name = "BearVideo"/>

Copy code

1. Private void AddGraphics ()
2. {
3. GraphicsLayer glayer = Map1.Layers ["GLayer"] as GraphicsLayer;
4. Graphic [] graphics = new Graphic [8];
5. Graphics [0] = new Graphic ()
6. {
7. Geometry = new MapPoint (108, 34 ),
8. Symbol = RedMarkerSymbol
9. };
11. Graphics [1] = new Graphic ()
12. {
13. Geometry = new MapPoint (108, 30 ),
14. Symbol = new SimpleMarkerSymbol ()
15. {
16. Color = new SolidColorBrush (Colors. Blue ),
17. Size = 12,
18. Style = SimpleMarkerSymbol. SimpleMarkerStyle. Square
19. }
20. };
22. Graphics [2] = new Graphic ()
23. {
24. Geometry = new MapPoint (108, 25 ),
25. Symbol = PinPictureMarkerSymbol
26. };
28. Graphics [3] = new Graphic ()
29. {
30. Geometry = new MapPoint (108, 20 ),
31. Symbol = new TextSymbol ()
32. {
33. FontFamily = new FontFamily (", "),
34. FontSize = 14,
35. Foreground = new SolidColorBrush (Colors. Black ),
36. Text = "this is text symbol"
37. }
38. };
40. Graphics [4] = new Graphic ();
41. Graphics [4]. Symbol = RedLineSymbol;
42. ESRI. ArcGIS. Geometry. PointCollection pc = new ESRI. ArcGIS. Geometry. PointCollection ()
43. {
44. New MapPoint (95,10 ),
45. New MapPoint (110,-15 ),
46. New MapPoint (130,10)
47. };
48. ESRI. ArcGIS. Geometry. Polyline pl = new ESRI. ArcGIS. Geometry. Polyline ();
49. Pl. Paths. Add (pc );
50. Graphics [4]. Geometry = pl;
52. Graphics [5] = new Graphic ();
53. Graphics [5]. Symbol = CartoLineSymbol;
54. ESRI. ArcGIS. Geometry. PointCollection pc1 = new ESRI. ArcGIS. Geometry. PointCollection ()
55. {
56. New MapPoint (95,0 ),
57. New MapPoint (110,-25 ),
58. New MapPoint (130,0)
59. };
60. ESRI. ArcGIS. Geometry. Polyline pl1 = new ESRI. ArcGIS. Geometry. Polyline ();
61. Pl1.Paths. Add (pc1 );
62. Graphics [5]. Geometry = pl1;
64. Graphics [6] = new Graphic ()
65. {
66. Symbol = RedFillSymbol
67. };
68. ESRI. ArcGIS. Geometry. PointCollection pc2 = new ESRI. ArcGIS. Geometry. PointCollection ()
69. {
70. New MapPoint (110,-30 ),
71. New MapPoint (130,-30 ),
72. New MapPoint (130,-45 ),
73. New MapPoint (120,-55 ),
74. New MapPoint (110,-45 ),
75. New MapPoint (110,-30)
76. };
77. ESRI. ArcGIS. Geometry. Polygon pg = new ESRI. ArcGIS. Geometry. Polygon ();
78. Pg. Rings. Add (pc2 );
79. Graphics [6]. Geometry = pg;
81. Graphics [7] = new Graphic ();
82. // The Name attribute of MediaElement can only be defined in xaml (see help). Therefore, MediaElement cannot be completely defined in cs code.
83. BearVideo. Source = new Uri ("http://serverapps.esri.com/media/bear.wmv", UriKind. RelativeOrAbsolute );
84. BearVideo. IsHitTestVisible = false;
85. BearVideo. IsMuted = true;
86. BearVideo. AutoPlay = true;
87. BearVideo. Opacity = 0;
88. ESRI. ArcGIS. Geometry. Polygon pg2 = new ESRI. ArcGIS. Geometry. Polygon ();
89. ESRI. ArcGIS. Geometry. PointCollection pc3 = new ESRI. ArcGIS. Geometry. PointCollection ()
90. {
91. New MapPoint (10,-20 ),
92. New MapPoint (32, 7 ),
93. New MapPoint (62,-35 ),
94. New MapPoint (11,-36 ),
95. New MapPoint (10,-20)
96. };
97. Pg2.Rings. Add (pc3 );
98. Graphics [7]. Geometry = pg2;
99. Graphics [7]. Symbol = new SimpleFillSymbol ()
100. {
101. Fill = new VideoBrush ()
102. {
103. SourceName = BearVideo. Name,
104. Opacity = 0.6,
105. Stretch = Stretch. UniformToFill
106. }
107. };
110. Foreach (Graphic g in graphics)
111. {
112. Glayer. Graphics. Add (g );
113. G. MouseLeftButtonDown + = new MouseButtonEventHandler (graphic_MouseLeftButtonDown );
114. }
115. }
117. Private void graphic_MouseLeftButtonDown (object o, MouseButtonEventArgs e)
118. {
119. Graphic g = o as Graphic;
120. MessageBox. show (string. format ("Geometry: {0} \ nSymbol: {1}", g. geometry. getType (). toString (), g. symbol. getType (). toString ()));
121. }

Copy code

We can see that some events can be defined on a Graphic to achieve the purpose of the program. You can try to rewrite the above content in xaml. The question is: is every definition of Geometry so difficult? In fact, SilverlightAPI has provided us with ESRI. arcGIS. draw (inherited from the Canvas in xaml) class, which can easily capture users' mouse operations and obtain various Geometry for use by the program.
You can understand Draw as a canvas and call the Active () method of Draw to Draw a drawing on the canvas. The program automatically records every Geometry drawn by the mouse and calls the DeActive () method, stop painting. Active () has a DrawMode parameter, which determines the content types we will draw on this canvas: Point, Polyline, Polygon, etc. During the painting process, we can see that the map can reflect the painting content in real time, and these use the predefined Symbol of Draw: DefaultMarkerSymbol, defalinlinesymbol, defapolypolygonsymbol, and so on. The relationship is as follows:

Download(5.8 KB)

 

Each time a drawing is drawn, Draw is triggered. onDrawComplete event, you can obtain Geometry using the event parameters, and then you can create a Graphic and set a Symbol (generally use the pre-defined Symbol of Draw ), add the Graphic to a GraphicsLayer.
Click here to view a complete Graphics example.
Finally, let's take a look at some of the Code in this example:

1. <Grid. Resources>
2. <EsriSymbols: SimpleMarkerSymbol x: Name = "DefaultMarkerSymbol" Color = "Red" Size = "12" Style = "Circle"/>
3. <EsriSymbols: CartographicLineSymbol x: Name = "DefaultLineSymbol" Color = "Red" Width = "4"/>
4. <EsriSymbols: SimpleFillSymbol x: Name = "DefaultFillSymbol" Fill = "#33FF0000" BorderBrush = "Red" BorderThickness = "2"/>
5. <EsriSymbols: SimpleFillSymbol x: Name = "DefaultPolygonSymbol" Fill = "#33FF0000" BorderBrush = "Red" BorderThickness = "2"/>
6. </Grid. Resources>
8. <Esriraw x: Name = "Draw1"
9. DefaultRectangleSymbol = "{StaticResource DefaultFillSymbol }"
10. DefaultMarkerSymbol = "{StaticResource DefaultMarkerSymbol }"
11. DefaultLineSymbol = "{StaticResource DefaultLineSymbol }"
12. DefaultPolygonSymbol = "{StaticResource DefaultPolygonSymbol }"
13. Loaded = "drawuploloaded"
14. OnDrawComplete = "Draw1_OnDrawComplete"/>
16. <Canvas verticalignment = "Top" HorizontalAlignment = "Left" Margin = "20, 20, 430" Width = "110" Height = "">
17. <Rectangle RadiusX = "10" RadiusY = "10" Width = "430" Height = "110" Fill = "#98000000" Stroke = "# FF6495ED"/>
18. <Rectangle Fill = "# FFFFFFFF" Stroke = "DarkGray" RadiusX = "5" RadiusY = "5" Canvas. left = "10" Canvas. top = "10" Width = "410" Height = "90"/>
20. <StackPanel Orientation = "Vertical" Canvas. Top = "5" Canvas. Left = "20">
21. <EsriWidgets: Toolbar x: Name = "ToolBar1" MaxItemHeight = "80" MaxItemWidth = "80" Width = "380" Height = "80"
22. ToolbarIndexChanged = "ToolBar1_ToolbarIndexChanged"
23. ToolbarItemClicked = "ToolBar1_ToolbarItemClicked">
24. <EsriWidgets: Toolbar. Items>
25. <EsriWidgets: ToolbarItemCollection>
26. <EsriWidgets: ToolbarItem Text = "add point">
27. <EsriWidgets: ToolbarItem. Content>
28. <Image Source = "imgs/DrawPoint.png" Stretch = "UniformToFill" Margin = "5"/>
29. </EsriWidgets: ToolbarItem. Content>
30. </EsriWidgets: ToolbarItem>
31. <EsriWidgets: ToolbarItem Text = "add a line">
32. <EsriWidgets: ToolbarItem. Content>
33. <Image Source = "imgs/DrawPolyline.png" Stretch = "UniformToFill" Margin = "5"/>
34. </EsriWidgets: ToolbarItem. Content>
35. </EsriWidgets: ToolbarItem>
36. <EsriWidgets: ToolbarItem Text = "add polygon">
37. <EsriWidgets: ToolbarItem. Content>
38. <Image Source = "imgs/DrawPolygon.png" Stretch = "UniformToFill" Margin = "5"/>
39. </EsriWidgets: ToolbarItem. Content>
40. </EsriWidgets: ToolbarItem>
41. <EsriWidgets: ToolbarItem Text = "add rectangle">
42. <EsriWidgets: ToolbarItem. Content>
43. <Image Source = "imgs/DrawRectangle.png" Stretch = "UniformToFill" Margin = "5"/>
44. </EsriWidgets: ToolbarItem. Content>
45. </EsriWidgets: ToolbarItem>
46. <EsriWidgets: ToolbarItem Text = "add curve">
47. <EsriWidgets: ToolbarItem. Content>
48. <Image Source = "imgs/DrawFreehand.png" Stretch = "UniformToFill" Margin = "5"/>
49. </EsriWidgets: ToolbarItem. Content>
50. </EsriWidgets: ToolbarItem>
51. <EsriWidgets: ToolbarItem Text = "Stop adding">
52. <EsriWidgets: ToolbarItem. Content>
53. <Image Source = "imgs/StopDraw.png" Stretch = "UniformToFill" Margin = "5"/>
54. </EsriWidgets: ToolbarItem. Content>
55. </EsriWidgets: ToolbarItem>
56. <EsriWidgets: ToolbarItem Text = "Clear drawn image">
57. <EsriWidgets: ToolbarItem. Content>
58. <Image Source = "imgs/eraser.png" Stretch = "UniformToFill" Margin = "5"/>
59. </EsriWidgets: ToolbarItem. Content>
60. </EsriWidgets: ToolbarItem>
61. </EsriWidgets: ToolbarItemCollection>
62. </EsriWidgets: Toolbar. Items>
63. </EsriWidgets: Toolbar>
64. <TextBlock x: Name = "StatusTextBlock" Text = "" FontWeight = "Bold" HorizontalAlignment = "Center"/>
65. </StackPanel>
66. </Canvas>

Copy code

1. Private void drawuploloaded (object sender, RoutedEventArgs e)
2. {
3. Draw1.Map = Map1;
4. }
6. Private void Draw1_OnDrawComplete (object sender, ESRI. ArcGIS. DrawEventArgs args)
7. {
8. ESRI. ArcGIS. GraphicsLayer graphicsLayer = Map1.Layers ["GLayer2"] as ESRI. ArcGIS. GraphicsLayer;
9. ESRI. ArcGIS. Graphic graphic = new ESRI. ArcGIS. Graphic ()
10. {
11. Geometry = args. Geometry,
12. Symbol = _ activeSymbol,
13. };
14. GraphicsLayer. Graphics. Add (graphic );
15. }
17. Private void ToolBar1_ToolbarIndexChanged (object sender, ESRI. ArcGIS. Widgets. SelectedToolbarItemArgs e)
18. {
19. StatusTextBlock. Text = e. Item. Text;
20. }
22. Private void ToolBar1_ToolbarItemClicked (object sender, ESRI. ArcGIS. Widgets. SelectedToolbarItemArgs e)
23. {
24. Draw1.Deactivate ();
25. Switch (e. Index)
26. {
27. Case 0: // Point
28. Draw1.Activate (ESRI. ArcGIS. DrawMode. Point );
29. _ ActiveSymbol = strobeSymbol;
30. Break;
31. Case 1: // Polyline
32. Draw1.Activate (ESRI. ArcGIS. DrawMode. Polyline );
33. _ ActiveSymbol = DefaultLineSymbol;
34. Break;
35. Case 2: // Polygon
36. Draw1.Activate (ESRI. ArcGIS. DrawMode. Polygon );
37. _ ActiveSymbol = DefaultPolygonSymbol;
38. Break;
39. Case 3: // Rectangle
40. Draw1.Activate (ESRI. ArcGIS. DrawMode. Rectangle );
41. _ ActiveSymbol = DefaultFillSymbol;
42. Break;
43. Case 4: // Freehand
44. Draw1.Activate (ESRI. ArcGIS. DrawMode. Freehand );
45. _ ActiveSymbol = waveLineSymbol;
46. Break;
47. Case 5: // Stop Graphics
48. Break;
49. Case 6: // Clear Graphics
50. ESRI. ArcGIS. GraphicsLayer graphicsLayer = Map1.Layers ["GLayer2"] as ESRI. ArcGIS. GraphicsLayer;
51. GraphicsLayer. ClearGraphics ();
52. Break;
54. }
55. }

Copy code

Note the dot and curve symbols added in the example. As long as you have enough imagination, you can use Silverlight to customize Very dazzling symbolic effects.
Address: http://bbs.esrichina-bj.cn/ESRI/thread-44892-1-1.html