概述ArcGIS API for Silverlight
开发入门(0):为什么要用Silverlight API? ArcGIS API for Silverlight开发入门(1):Getting Started ArcGIS API for Silverlight开发入门(2):一个基础地图实例 ArcGIS API for Silverlight开发入门(3):Widgets 我
ArcGIS API for Silverlight开发入门(0):为什么要用Silverlight API?
ArcGIS API for Silverlight开发入门(1):Getting Started
ArcGIS API for Silverlight开发入门(2):一个基础地图实例
ArcGIS API for Silverlight开发入门(3):Widgets
我们与地图交互的过程时刻在进行着:一个拉框放大 *** 作,或者对地图内容的查询等。这些交互过程中的输入输出,通常都是反映在独立于地图数据一个“层”上。比如拉框放大,我们能看见鼠标所画的一个矩形;又比如对兴趣点的查询,结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中,通过它既可以反映用户的输入,又可以展现地图的输出。这个“层”就是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属性:
在xaml中
<esri:Graphic> <esri:Graphic.Symbol> <esriSymbols:SimpleMarkerSymbol color="Blue" Size="12" Style="Square" /> </esri:Graphic.Symbol> <esriGeometry:MapPoint X="108" Y="30" /> </esri:Graphic>
复制代码 在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中
<esri:Graphicslayer ID="GLayer"> <esri:Graphicslayer.Graphics> <esri:Graphic> <esri:Graphic.Symbol> <esriSymbols:SimpleMarkerSymbol color="Blue" Size="12" Style="Square" /> </esri:Graphic.Symbol> <esriGeometry:MapPoint X="108" Y="30" /> </esri:Graphic> </esri:Graphicslayer.Graphics> </esri:Graphicslayer>
复制代码 在code-behind中
Graphic g = new Graphic() { Geometry = new MapPoint(108, 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, 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条)