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

概述         我们与地图交互的过程时刻在进行着：一个拉框放大 *** 作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是GraphicsLayer。        

         我们与地图交互的过程时刻在进行着：一个拉框放大 *** 作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是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定制出非常炫的符号效果来。

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

原文地址：http://bbs.esrichina-bj.cn/ESRI/vIEwthread.PHP?tID=44892&page=1

总结

以上是内存溢出为你收集整理的ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁--GraphicsLayer全部内容，希望文章能够帮你解决ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁--GraphicsLayer所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。