投稿
  1. 首页
  2. app

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

nodejs • 2022-5-22 • app • 阅读 47

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

概述 我们与地图交互的过程时刻在进行着：一个拉框放大 *** 作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是GraphicsLayer。         其实ADF  我们与地图交互的过程时刻在进行着：一个拉框放大 *** 作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是Graphicslayer。
        其实ADF开发中也有Graphicslayer的概念，同样在其他两个客户端API（JavaScript/Flex）中也能找到Graphicslayer的身影，它们都是一样一样的。
        本节我们主要看如何在Graphicslayer中展现内容。当然第一个工作就是添加ESRI.ArcGIS.dll的引用，引入esri的xml命名空间；接下来在Map中添加一个Graphicslayer图层： <esri:Map x:name="Map1">
 <esri:Map.Layers>
 <!-- 其他图层 -->
 <esri:Graphicslayer ID="GLayer" />
 </esri:Map.Layers>
 </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中 <esri:Graphic>
 </esri:Graphic> 在code-behind中
Graphic g= new Graphic()
2、设置Graphic的Geometry和Symbol属性：
<esri:Graphic.Symbol>
 <esriSymbols:SimpleMarkerSymbol color="Blue" Size="12" Style="Square" />
 </esri:Graphic.Symbol>
 <esriGeometry:MapPoint X="108" Y="30" />
 复制代码 在code-behind中 Graphic g = new Graphic()
 {
 Geometry = new MapPoint(108,30),
 Symbol = new SimpleMarkerSymbol()
 color = new SolIDcolorBrush(colors.Blue),255)">Size = 12,255)">Style = SimpleMarkerSymbol.SimpleMarkerStyle.Square
 }
 }; 3、把定义好的Graphic添加到Graphicslayer里：
<esri:Graphicslayer ID="GLayer">
 <esri:Graphicslayer.Graphics>
 </esri:Graphic>
 </esri:Graphicslayer.Graphics>
 </esri:Graphicslayer> };
 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()
 Graphic[] graphics = new Graphic[8];
 graphics[0] = new Graphic()
 Symbol = RedMarkerSymbol
 graphics[1] = new Graphic()
 graphics[2] = new Graphic()
 Symbol = PinPictureMarkerSymbol
 graphics[3] = new Graphic()
 Symbol = new TextSymbol()
 FontFamily = new FontFamily("微软雅黑,宋体"),255)">FontSize = 14,255)">Foreground = new SolIDcolorBrush(colors.Black),255)">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),255)">new MapPoint(110,-15),255)">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()
 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(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),255)">new MapPoint(32,7),255)">new MapPoint(62,-35),255)">new MapPoint(11,-36),-20)
 pg2.Rings.Add(pc3);
 graphics[7].Geometry=pg2;
 graphics[7].Symbol = new SimpleFillSymbol()
 Fill = new VIDeoBrush()
 Sourcename = BearVIDeo.name,255)">Opacity = 0.6,255)">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的例子。
最后来看一下这个例子的部分代码： <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" />
 <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="添加折线">
 <Image Source="imgs/Drawpolyline.png" Stretch="UniformToFill" margin="5" />
 <esriWidgets:ToolbarItem Text="添加多边形">
 <Image Source="imgs/Drawpolygon.png" Stretch="UniformToFill" margin="5" />
 <esriWidgets:ToolbarItem Text="添加矩形">
 <Image Source="imgs/DrawRectangle.png" Stretch="UniformToFill" margin="5" />
 <esriWidgets:ToolbarItem Text="添加曲线">
 <Image Source="imgs/DrawFreehand.png" Stretch="UniformToFill" margin="5" />
 <esriWidgets:ToolbarItem Text="停止添加动作">
 <Image Source="imgs/StopDraw.png" Stretch="UniformToFill" margin="5" />
 <esriWidgets:ToolbarItem Text="清空绘制的图形">
 <Image Source="imgs/eraser.png" Stretch="UniformToFill" margin="5" />
 </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,255)">Symbol = _activeSymbol,255)">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,255)">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;
 case 2: // polygon
 Draw1.Activate(ESRI.ArcGIS.DrawMode.polygon);
 _activeSymbol = DefaultpolygonSymbol;
 case 3: // Rectangle
 Draw1.Activate(ESRI.ArcGIS.DrawMode.Rectangle);
 _activeSymbol = DefaultFillSymbol;
 case 4: // Freehand
 Draw1.Activate(ESRI.ArcGIS.DrawMode.Freehand);
 _activeSymbol = wavelinesymbol;
 case 5: // Stop Graphics
 case 6: // Clear Graphics
 graphicslayer.Cleargraphics();
 大家可以注意一下例子中添加的点符号和曲线符号。只要有足够的想象力，完全可以利用Silverlight定制出非常炫的符号效果来。 总结

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

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

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1011460.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
nodejs nodejs 一级用户组
0 0
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表（0条）

保存