我们与地图交互的过程时刻在进行着：一个拉框放大 *** 作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是Graphicslayer。
其实ADF开发中也有Graphicslayer的概念，同样在其他两个客户端API（JavaScript/Flex）中也能找到Graphicslayer的身影，它们都是一样一样的。
本节我们主要看如何在Graphicslayer中展现内容。当然第一个工作就是添加ESRI.ArcGIS.dll的引用，引入esri的xml命名空间；接下来在Map中添加一个Graphicslayer图层：
复制代码
要使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中
复制代码
在code-behind中
Graphic g= new Graphic()
2、设置Graphic的Geometry和Symbol属性：
在xaml中
复制代码
在code-behind中
Graphic g = new Graphic() { Geometry = new MapPoint(108,30), Symbol = new SimpleMarkerSymbol() { color = new SolIDcolorBrush(colors.Blue), Size = 12, Style = SimpleMarkerSymbol.SimpleMarkerStyle.Square } };复制代码
3、把定义好的Graphic添加到Graphicslayer里：
在xaml中
复制代码
在code-behind中
Graphic g = new Graphic() { Geometry = new MapPoint(108, Symbol = new SimpleMarkerSymbol() { color = new SolIDcolorBrush(colors.Blue), Size = 12, Style = SimpleMarkerSymbol.SimpleMarkerStyle.Square } }; Graphicslayer glayer = Map1.Layers["GLayer"] as Graphicslayer; glayer.Graphics.Add(g);复制代码
看一下效果：
图中还有其他的图形，无非是改变了Graphic的Geometry和Symbol属性。图上的那只灰熊是一段动画文件，利用Silverlight的特性，能够定义出表现力丰富的各种符号。
尽管能够完全在xaml中来完成工作，但还是建议将可视化元素的定义放在xaml中，将实现的逻辑部分放在code-behind中。看一下添加图中那些Graphic的代码： <GrID.Resources> <esriSymbols:SimpleMarkerSymbol x:name=”RedMarkerSymbol” color=”Red” Size=”12″ Style=”Circle” /> <!– 可惜目前Silverlight只支持Jpeg和PNG格式的图像，所以PictureMarkerSymbol无法显示GIF格式的图像，否则会报ImagingError的错误 –> <esriSymbolsictureMarkerSymbol x:name=”PinPictureMarkerSymbol” Source=”imgs/pin.png” OffsetX=”10″ OffsetY=”10″ /> <esriSymbols:Simplelinesymbol x:name=”Redlinesymbol” color=”Red” WIDth=”4″ Style=”SolID” /> <esriSymbols:Cartographiclinesymbol x:name=”Cartolinesymbol” color=”Red” WIDth=”10″ DashCap=”Triangle” lineJoin=”Round” DashArray=”6,2″ /> <esriSymbols:SimpleFillSymbol x:name=”RedFillSymbol” Fill=”#66FF0000″ borderBrush=”Red” borderThickness=”2″ /> </GrID.Resources> <MediaElement x:name=”BearVIDeo” />
复制代码
private voID AddGraphics() { Graphicslayer glayer = Map1.Layers["GLayer"] as Graphicslayer; Graphic[] graphics = new Graphic[8]; graphics[0] = new Graphic() { Geometry = new MapPoint(108,34), Symbol = RedMarkerSymbol }; graphics[1] = new Graphic() { Geometry = new MapPoint(108, Symbol = new SimpleMarkerSymbol() { color = new SolIDcolorBrush(colors.Blue), Size = 12, Style = SimpleMarkerSymbol.SimpleMarkerStyle.Square } }; graphics[2] = new Graphic() { Geometry = new MapPoint(108,25), Symbol = PinPictureMarkerSymbol }; graphics[3] = new Graphic() { Geometry = new MapPoint(108,20), Symbol = new TextSymbol() { FontFamily = new FontFamily(”微软雅黑,宋体”), FontSize = 14, Foreground = new SolIDcolorBrush(colors.Black), Text = “这是text symbol” } }; graphics[4] = new Graphic(); graphics[4].Symbol = Redlinesymbol; ESRI.ArcGIS.Geometry.PointCollection pc = new ESRI.ArcGIS.Geometry.PointCollection() { new MapPoint(95,10), new MapPoint(110,-15), new MapPoint(130,10) }; ESRI.ArcGIS.Geometry.polyline pl = new ESRI.ArcGIS.Geometry.polyline(); pl.Paths.Add(pc); graphics[4].Geometry = pl; graphics[5] = new Graphic(); graphics[5].Symbol = Cartolinesymbol; ESRI.ArcGIS.Geometry.PointCollection pc1 = new ESRI.ArcGIS.Geometry.PointCollection() { new MapPoint(95,0),-25),0) }; ESRI.ArcGIS.Geometry.polyline pl1 = new ESRI.ArcGIS.Geometry.polyline(); pl1.Paths.Add(pc1); graphics[5].Geometry = pl1; graphics[6] = new Graphic() { Symbol = RedFillSymbol }; ESRI.ArcGIS.Geometry.PointCollection pc2 = new ESRI.ArcGIS.Geometry.PointCollection() { new MapPoint(110,-30),-45), new MapPoint(120,-55),-30) }; ESRI.ArcGIS.Geometry.polygon pg = new ESRI.ArcGIS.Geometry.polygon(); pg.Rings.Add(pc2); graphics[6].Geometry=pg; graphics[7] = new Graphic(); //MediaElement的name属性只能在xaml中定义（见帮助），所以决定了MediaElement不能完全在cs代码中定义 BearVIDeo.source = new Uri(”http://serverapps.esri.com/media/bear.wmv”,UriKind.relativeOrabsolute); BearVIDeo.IsHitTestVisible=false; BearVIDeo.IsMuted=true; BearVIDeo.Autoplay=true; BearVIDeo.Opacity=0; ESRI.ArcGIS.Geometry.polygon pg2 = new ESRI.ArcGIS.Geometry.polygon(); ESRI.ArcGIS.Geometry.PointCollection pc3 = new ESRI.ArcGIS.Geometry.PointCollection() { new MapPoint(10,-20), new MapPoint(32,7), new MapPoint(62,-35), new MapPoint(11,-36), new MapPoint(10,-20) }; pg2.Rings.Add(pc3); graphics[7].Geometry=pg2; graphics[7].Symbol = new SimpleFillSymbol() { Fill = new VIDeoBrush() { Sourcename = BearVIDeo.name, Opacity = 0.6, Stretch = Stretch.UniformToFill } }; foreach (Graphic g in graphics) { glayer.Graphics.Add(g); g.MouseleftbuttonDown+=new MousebuttonEventHandler(graphic_MouseleftbuttonDown); } } private voID graphic_MouseleftbuttonDown(object o,MousebuttonEventArgs e) { Graphic g=o as Graphic; MessageBox.Show(string.Format(”Geometry:{0}/nSymbol:{1}”,g.Geometry.GetType().ToString(),g.Symbol.GetType().ToString())); }复制代码
可以看到，完全能够在一个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的例子。
最后来看一下这个例子的部分代码： <GrID.Resources> <esriSymbols:SimpleMarkerSymbol x:name=”DefaultMarkerSymbol” color=”Red” Size=”12″ Style=”Circle” /> <esriSymbols:Cartographiclinesymbol x:name=”Defaultlinesymbol” color=”Red” WIDth=”4″ /> <esriSymbols:SimpleFillSymbol x:name=”DefaultFillSymbol” Fill=”#33FF0000″ borderBrush=”Red” borderThickness=”2″ /> <esriSymbols:SimpleFillSymbol x:name=”DefaultpolygonSymbol” Fill=”#33FF0000″ borderBrush=”Red” borderThickness=”2″ /> </GrID.Resources> <esriraw x:name=”Draw1″ DefaultRectangleSymbol=”{StaticResource DefaultFillSymbol}” DefaultMarkerSymbol=”{StaticResource DefaultMarkerSymbol}” Defaultlinesymbol=”{StaticResource Defaultlinesymbol}” DefaultpolygonSymbol=”{StaticResource DefaultpolygonSymbol}” Loaded=”Draw1_Loaded” OnDrawComplete=”Draw1_OnDrawComplete” /> <Canvas VerticalAlignment=”top” HorizontalAlignment=”left” margin=”20,20,0″ WIDth=”430″ Height=”110″> <Rectangle RadiusX=”10″ RadiusY=”10″ WIDth=”430″ Height=”110″ Fill=”#98000000″ stroke=”#FF6495ED” /> <Rectangle Fill=”#FFFFFFFF” stroke=”DarkGray” RadiusX=”5″ RadiusY=”5″ Canvas.left=”10″ Canvas.top=”10″ WIDth=”410″ Height=”90″ /> <StackPanel OrIEntation=”Vertical” Canvas.top=”5″ Canvas.left=”20″> <esriWidgets:Toolbar x:name=”Toolbar1″ MaxItemHeight=”80″ MaxItemWIDth=”80″ WIDth=”380″ Height=”80″ ToolbarIndexChanged=”Toolbar1_ToolbarIndexChanged” ToolbarItemClicked=”Toolbar1_ToolbarItemClicked”> <esriWidgets:Toolbar.Items> <esriWidgets:ToolbarItemCollection> <esriWidgets:ToolbarItem Text=”添加点”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/DrawPoint.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> <esriWidgets:ToolbarItem Text=”添加折线”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/Drawpolyline.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> <esriWidgets:ToolbarItem Text=”添加多边形”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/Drawpolygon.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> <esriWidgets:ToolbarItem Text=”添加矩形”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/DrawRectangle.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> <esriWidgets:ToolbarItem Text=”添加曲线”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/DrawFreehand.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> <esriWidgets:ToolbarItem Text=”停止添加动作”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/StopDraw.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> <esriWidgets:ToolbarItem Text=”清空绘制的图形”> <esriWidgets:ToolbarItem.Content> <Image Source=”imgs/eraser.png” Stretch=”UniformToFill” margin=”5″ /> </esriWidgets:ToolbarItem.Content> </esriWidgets:ToolbarItem> </esriWidgets:ToolbarItemCollection> </esriWidgets:Toolbar.Items> </esriWidgets:Toolbar> <TextBlock x:name=”StatusTextBlock” Text=”" FontWeight=”Bold” HorizontalAlignment=”Center”/> </StackPanel> </Canvas>
复制代码
private voID Draw1_Loaded(object sender,RoutedEventArgs e) { Draw1.Map = Map1; } private voID Draw1_OnDrawComplete(object sender,ESRI.ArcGIS.DrawEventArgs args) { ESRI.ArcGIS.Graphicslayer graphicslayer = Map1.Layers["GLayer2"] as ESRI.ArcGIS.Graphicslayer; ESRI.ArcGIS.Graphic graphic = new ESRI.ArcGIS.Graphic() { Geometry = args.Geometry, Symbol = _activeSymbol, }; graphicslayer.Graphics.Add(graphic); } private voID Toolbar1_ToolbarIndexChanged(object sender,ESRI.ArcGIS.Widgets.SelectedToolbarItemArgs e) { StatusTextBlock.Text = e.Item.Text; } private voID Toolbar1_ToolbarItemClicked(object sender,ESRI.ArcGIS.Widgets.SelectedToolbarItemArgs e) { Draw1.Deactivate(); switch (e.Index) { case 0: // Point Draw1.Activate(ESRI.ArcGIS.DrawMode.Point); _activeSymbol = strobeSymbol; break; case 1: // polyline Draw1.Activate(ESRI.ArcGIS.DrawMode.polyline); _activeSymbol = Defaultlinesymbol; break; case 2: // polygon Draw1.Activate(ESRI.ArcGIS.DrawMode.polygon); _activeSymbol = DefaultpolygonSymbol; break; case 3: // Rectangle Draw1.Activate(ESRI.ArcGIS.DrawMode.Rectangle); _activeSymbol = DefaultFillSymbol; break; case 4: // Freehand Draw1.Activate(ESRI.ArcGIS.DrawMode.Freehand); _activeSymbol = wavelinesymbol; break; case 5: // Stop Graphics break; case 6: // Clear Graphics ESRI.ArcGIS.Graphicslayer graphicslayer = Map1.Layers["GLayer2"] as ESRI.ArcGIS.Graphicslayer; graphicslayer.Cleargraphics(); break; } }复制代码
大家可以注意一下例子中添加的点符号和曲线符号。只要有足够的想象力，完全可以利用Silverlight定制出非常炫的符号效果来。 好了，下一节我们来了解如何使用这些画出的图形与地图数据交互。
总结以上是内存溢出为你收集整理的ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁–GraphicsLayer全部内容，希望文章能够帮你解决ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁–GraphicsLayer所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）