我们与地图交互的过程时刻在进行着：一个拉框放大操作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是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,
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. <!-- 可惜目前Silverlight只支持Jpeg和PNG格式的图像，所以PictureMarkerSymbol无法显示GIF格式的图像，否则会报ImagingError的错误 -->
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>
9.
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,
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,
72. new MapPoint(130,-45),
73. new MapPoint(120,-55),
74. new MapPoint(110,
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>
7.
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" 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. }
5.
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定制出非常炫的符号效果来。
|
|
原文地址：http://bbs.esrichina-bj.cn/ESRI/viewthread.PHP?tid=44892&page=1
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。