ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁--GraphicsLayer

最新推荐文章于 2021-03-22 09:57:50 发布

转载最新推荐文章于 2021-03-22 09:57:50 发布 · 931 阅读

GIS 同时被 2 个专栏收录

70 篇文章

订阅专栏

Silverlight

16 篇文章

订阅专栏

本文详细介绍如何在ArcGIS API for Silverlight中使用GraphicsLayer添加自定义图形，并通过代码演示如何定义不同类型的几何图形及其符号，同时介绍了如何利用Draw类简化几何图形的绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们与地图交互的过程时刻在进行着：一个拉框放大操作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是GraphicsLayer。
其实ADF开发中也有GraphicsLayer的概念，同样在其他两个客户端API（JavaScript/Flex）中也能找到GraphicsLayer的身影，它们都是一样一样的。
本节我们主要看如何在GraphicsLayer中展现内容。当然第一个工作就是添加ESRI.ArcGIS.dll的引用，引入esri的xml命名空间；接下来在Map中添加一个GraphicsLayer图层：

1. <esri:Map x:Name="Map1">

2. <esri:Map.Layers>

3.

4. <esri:GraphicsLayer ID="GLayer" />

5. </esri:Map.Layers>

6. </esri:Map>

复制代码

要使GraphicsLayer中的内容处于最顶端（不被其他图层内容覆盖），就要将它放在Map标签里的最下头，像上面那样。从命名我们不难看出，GraphicLayer里面放的就是Graphic的集合了。Graphic（ESRI.ArcGIS.Graphic）是GraphicsLayer中的基本元素，它包括了Geometry(在ESRI.ArcGIS.Geometry命名空间中)，Symbol（在ESRI.ArcGIS.Symbol命名空间中），Attributes等属性。所有显示在地图中的矢量元素都有一个Geometry，里面包含了若干地理坐标，用于显示地图上地物的形状，它是Point，Polyline，Polygon等的总称，在这里代表了Graphic的形状。Symbol代表了Graphic的外观，它是一系列符号的总称，我们通常跟SimpleMarkerSymbol，SimpleLineSymbol和SimpleFillSymbol等打交道，它们分别对应了上面3种不同的Geometry（Point，Polyline，Polygon）。
要让一个Graphic显示出来，总共分3步：
1、定义Graphic：
在xaml中

1. <esri:Graphic>

2. </esri:Graphic>

复制代码

在code-behind中
Graphic g= new Graphic()
2、设置Graphic的Geometry和Symbol属性：
在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>

复制代码

在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. };

复制代码

3、把定义好的Graphic添加到GraphicsLayer里：
在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>

复制代码

在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);

复制代码

看一下效果：

图中还有其他的图形，无非是改变了Graphic的Geometry和Symbol属性。图上的那只灰熊是一段动画文件，利用Silverlight的特性，能够定义出表现力丰富的各种符号。
尽管能够完全在xaml中来完成工作，但还是建议将可视化元素的定义放在xaml中，将实现的逻辑部分放在code-behind中。看一下添加图中那些Graphic的代码：

1. <Grid.Resources>

2. <esriSymbols:SimpleMarkerSymbolx:Name="RedMarkerSymbol" Color="Red" Size="12"Style="Circle" />

3.

4. <esriSymbolsictureMarkerSymbolx:Name="PinPictureMarkerSymbol" Source="imgs/pin.png"OffsetX="10" OffsetY="10" />

5. <esriSymbols:SimpleLineSymbolx:Name="RedLineSymbol" Color="Red" Width="4"Style="Solid" />

6. <esriSymbols:CartographicLineSymbolx:Name="CartoLineSymbol" Color="Red" Width="10"DashCap="Triangle" LineJoin="Round"DashArray="6,2" />

7. <esriSymbols:SimpleFillSymbolx:Name="RedFillSymbol" Fill="#66FF0000"BorderBrush="Red" BorderThickness="2" />

8. </Grid.Resources>

10. <MediaElementx:Name="BearVideo" />

复制代码

1. private void AddGraphics()

2. {

3. GraphicsLayer glayer = Map1.Layers["GLayer"] asGraphicsLayer;

4. Graphic[] graphics = new Graphic[8];

5. graphics[0] = new Graphic()

6. {

7. Geometry = new MapPoint(108, 34),

8. Symbol = RedMarkerSymbol

9. };

10.

11. graphics[1] = new Graphic()

12. {

13. Geometry = new MapPoint(108,30),

14. Symbol = newSimpleMarkerSymbol()

15. {

16. Color = newSolidColorBrush(Colors.Blue),

17. Size = 12,

18. Style =SimpleMarkerSymbol.SimpleMarkerStyle.Square

19. }

20. };

21.

22. graphics[2] = new Graphic()

23. {

24. Geometry = new MapPoint(108,25),

25. Symbol =PinPictureMarkerSymbol

26. };

27.

28. graphics[3] = new Graphic()

29. {

30. Geometry = new MapPoint(108,20),

31. Symbol = new TextSymbol()

32. {

33. FontFamily = newFontFamily("微软雅黑, 宋体"),

34. FontSize = 14,

35. Foreground = newSolidColorBrush(Colors.Black),

36. Text = "这是text symbol"

37. }

38. };

39.

40. graphics[4] = new Graphic();

41. graphics[4].Symbol =RedLineSymbol;

42. ESRI.ArcGIS.Geometry.PointCollectionpc = 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.Polylinepl = new ESRI.ArcGIS.Geometry.Polyline();

49. pl.Paths.Add(pc);

50. graphics[4].Geometry = pl;

51.

52. graphics[5] = new Graphic();

53. graphics[5].Symbol =CartoLineSymbol;

54. ESRI.ArcGIS.Geometry.PointCollectionpc1 = 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.Polylinepl1 = new ESRI.ArcGIS.Geometry.Polyline();

61. pl1.Paths.Add(pc1);

62. graphics[5].Geometry = pl1;

63.

64. graphics[6] = new Graphic()

65. {

66. Symbol = RedFillSymbol

67. };

68. ESRI.ArcGIS.Geometry.PointCollectionpc2 = 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.Polygonpg = new ESRI.ArcGIS.Geometry.Polygon();

78. pg.Rings.Add(pc2);

79. graphics[6].Geometry=pg;

80.

81. graphics[7] = new Graphic();

82. //MediaElement的Name属性只能在xaml中定义（见帮助），所以决定了MediaElement不能完全在cs代码中定义

83. BearVideo.Source = newUri("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.Polygonpg2 = new ESRI.ArcGIS.Geometry.Polygon();

89. ESRI.ArcGIS.Geometry.PointCollectionpc3 = 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 = newSimpleFillSymbol()

100. {

101. Fill = new VideoBrush()

102. {

103. SourceName = BearVideo.Name,

104. Opacity = 0.6,

105. Stretch =Stretch.UniformToFill

106. }

107. };

108.

109.

110. foreach (Graphic g ingraphics)

111. {

112. glayer.Graphics.Add(g);

113. g.MouseLeftButtonDown+=new MouseButtonEventHandler(graphic_MouseLeftButtonDown);

114. }

115. }

116.

117. private voidgraphic_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. }

复制代码

可以看到，完全能够在一个Graphic上定义一些事件，来达到程序的目的。大家可以试着把上面的内容在xaml中改写一遍。看到这里肯定会产生一个疑问：难道每个Geometry的定义都这么困难吗？其实SilverlightAPI已经给我们提供了ESRI.ArcGIS.Draw（继承自xaml中的Canvas）类，它能非常方便的捕捉到用户的鼠标操作，从而获取各种Geometry来供程序使用。
可以把Draw理解成一块画板，调用Draw的Active()方法，就可以开始在画板上面绘画，程序会自动记录鼠标画出的每个Geometry，调用DeActive()方法，停止绘画。Active()有一个DrawMode参数，它决定了我们即将在这个画板上画出的内容类型：Point，Polyline，Polygon等。在画的过程中我们可以看到地图上可以实时反映出我们绘画的内容，而这些则利用了Draw的预定义Symbol：DefaultMarkerSymbol，DefaultLineSymbol，DefaultPolygonSymbol等。对应关系如下：

每当完成一个图形的绘制，就会触发Draw.OnDrawComplete事件，利用事件参数就可以获得Geometry，之后可以创建一个Graphic，设置一个Symbol（一般使用Draw的预定义Symbol），把画好的这个Graphic添加到一个GraphicsLayer中。
点击这里，查看一个比较完整的Graphics的例子。
最后来看一下这个例子的部分代码：

1. <Grid.Resources>

2. <esriSymbols:SimpleMarkerSymbolx:Name="DefaultMarkerSymbol" Color="Red"Size="12" Style="Circle" />

3. <esriSymbols:CartographicLineSymbolx:Name="DefaultLineSymbol" Color="Red" Width="4"/>

4. <esriSymbols:SimpleFillSymbolx:Name="DefaultFillSymbol" Fill="#33FF0000"BorderBrush="Red" BorderThickness="2" />

5. <esriSymbols:SimpleFillSymbolx:Name="DefaultPolygonSymbol" Fill="#33FF0000" BorderBrush="Red"BorderThickness="2" />

6. </Grid.Resources>

8. <esriraw x:Name="Draw1"

9. DefaultRectangleSymbol="{StaticResourceDefaultFillSymbol}"

10. DefaultMarkerSymbol="{StaticResourceDefaultMarkerSymbol}"

11. DefaultLineSymbol="{StaticResourceDefaultLineSymbol}"

12. DefaultPolygonSymbol="{StaticResourceDefaultPolygonSymbol}"

13. Loaded="Draw1_Loaded"

14. OnDrawComplete="Draw1_OnDrawComplete"/>

15.

16. <CanvasVerticalAlignment="Top" HorizontalAlignment="Left"Margin="20,20,0,0" Width="430" Height="110">

17. <RectangleRadiusX="10" RadiusY="10" Width="430"Height="110" Fill="#98000000" Stroke="#FF6495ED"/>

18. <RectangleFill="#FFFFFFFF" Stroke="DarkGray" RadiusX="5"RadiusY="5" Canvas.Left="10" Canvas.Top="10"Width="410" Height="90" />

19.

20. <StackPanelOrientation="Vertical" Canvas.Top="5"Canvas.Left="20">

21. <esriWidgets:Toolbarx: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:ToolbarItemText="添加点">

27. <esriWidgets:ToolbarItem.Content>

28. <ImageSource="imgs/DrawPoint.png" Stretch="UniformToFill"Margin="5" />

29. </esriWidgets:ToolbarItem.Content>

30. </esriWidgets:ToolbarItem>

31. <esriWidgets:ToolbarItemText="添加折线">

32. <esriWidgets:ToolbarItem.Content>

33. <ImageSource="imgs/DrawPolyline.png" Stretch="UniformToFill"Margin="5" />

34. </esriWidgets:ToolbarItem.Content>

35. </esriWidgets:ToolbarItem>

36. <esriWidgets:ToolbarItemText="添加多边形">

37. <esriWidgets:ToolbarItem.Content>

38. <ImageSource="imgs/DrawPolygon.png" Stretch="UniformToFill"Margin="5" />

39. </esriWidgets:ToolbarItem.Content>

40. </esriWidgets:ToolbarItem>

41. <esriWidgets:ToolbarItemText="添加矩形">

42. <esriWidgets:ToolbarItem.Content>

43. <ImageSource="imgs/DrawRectangle.png" Stretch="UniformToFill"Margin="5" />

44. </esriWidgets:ToolbarItem.Content>

45. </esriWidgets:ToolbarItem>

46. <esriWidgets:ToolbarItemText="添加曲线">

47. <esriWidgets:ToolbarItem.Content>

48. <ImageSource="imgs/DrawFreehand.png" Stretch="UniformToFill"Margin="5" />

49. </esriWidgets:ToolbarItem.Content>

50. </esriWidgets:ToolbarItem>

51. <esriWidgets:ToolbarItemText="停止添加动作">

52. <esriWidgets:ToolbarItem.Content>

53. <Image Source="imgs/StopDraw.png"Stretch="UniformToFill" Margin="5" />

54. </esriWidgets:ToolbarItem.Content>

55. </esriWidgets:ToolbarItem>

56. <esriWidgets:ToolbarItemText="清空绘制的图形">

57. <esriWidgets:ToolbarItem.Content>

58. <ImageSource="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. <TextBlockx:Name="StatusTextBlock" Text=""FontWeight="Bold" HorizontalAlignment="Center"/>

65. </StackPanel>

66. </Canvas>

复制代码

1. private void Draw1_Loaded(object sender, RoutedEventArgse)

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. }

16.

17. private voidToolBar1_ToolbarIndexChanged(object sender,ESRI.ArcGIS.Widgets.SelectedToolbarItemArgs e)

18. {

19. StatusTextBlock.Text =e.Item.Text;

20. }

21.

22. private voidToolBar1_ToolbarItemClicked(object sender, ESRI.ArcGIS.Widgets.SelectedToolbarItemArgse)

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.GraphicsLayergraphicsLayer = Map1.Layers["GLayer2"] as ESRI.ArcGIS.GraphicsLayer;

51. graphicsLayer.ClearGraphics();

52. break;

53.

54. }

55. }

复制代码

大家可以注意一下例子中添加的点符号和曲线符号。只要有足够的想象力，完全可以利用Silverlight定制出非常炫的符号效果来。

ArcGIS API for Silverlight开发入门（3）：Widgets

原文地址：http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=44892&page=1