silverlight
发布时间:2022-05-04 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了ArcGIS API for Silverlight开发入门(4):用户与地理信息之间的桥梁--GraphicsLayer,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
我们与地图交互的过程时刻在进行着:一个拉框放大操作,或者对地图内容的查询等。这些交互过程中的输入输出,通常都是反映在独立于地图数据一个“层”上。比如拉框放大,我们能看见鼠标所画的一个矩形;又比如对兴趣点的查询,结果通常是
将符合条件的兴趣点的形状高亮显示在那个独立的“层”中,通过它既可以反映用户的输入,
又可以展现地图的输出。这个“层”就是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和S
ymbol
属性:
- <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()
- BACkground-color:rgb(255,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(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的预定义S
ymbol:DefaultMarkerS
ymbol,DefaultLi
nesymbol,DefaultPolygonS
ymbol等。对应关系如下:
每当完成一个图形的绘制,就会触发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所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。