ElementLayer是ArcGIS API for Silverlight/WPF中的一种图层类型,主要用来承载Silverlight/WPF中的UIElement对象(UIElement),使用ElementLayer有一个主要的优点就是:ElementLayer中的元素会随着地图的变化而变化(缩放/平移)(PS:在元素控件没有固定size的情况下),而不用自己去处理这些UIElement的地理坐标。所以可以选择使用ElementLayer来放置我们想要的Windows控件元素。
比如,当点击GraphicsLayer上的某一点时,弹出一个信息展示界面等功能时就可以用到ElementLayer。
可以先看一下官方ArcGIS API for Silverlight中对ElementLayer用法的介绍:http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#ElementLayer
主要是通过XAML代码来实现的:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<UserControl x:Class="ArcGISSilverlightSDK.ElementLayer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/client/2009"> <Grid x:Name="LayoutRoot" Background="White"> <esri:Map x:Name="MyMap"> <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"/> <esri:ElementLayer> <esri:ElementLayer.Children> <!--Clickable button--> <Button x:Name="RedlandsButton" Width="20" Height="20" Content="X" esri:ElementLayer.Envelope="-117,34,-117,34" VerticalAlignment="Center" HorizontalAlignment="Center" Click="RedlandsButton_Click" /> <!--Arrow pointing at Copenhagen from the right--> <TextBlock Text="<=" HorizontalAlignment="Right" FontSize="15" Foreground="Blue" FontWeight="Bold" esri:ElementLayer.Envelope="12.5698,55.6765,12.5698,55.6765" /> <!--Arrow pointing at Copenhagen from the left--> <TextBlock Text="=>" HorizontalAlignment="Left" FontSize="15" Foreground="Blue" FontWeight="Bold" esri:ElementLayer.Envelope="12.5698,55.6765,12.5698,55.6765" /> <!-- Red box - No size specified. Envelope guides the size --> <Rectangle Fill="Red" esri:ElementLayer.Envelope="0,0,10,10" /> <!--Editable textbox--> <TextBox Width="100" Height="20" esri:ElementLayer.Envelope="40,0,40,0" Text="Editable text" HorizontalAlignment="Right" VerticalAlignment="Bottom" /> </esri:ElementLayer.Children> </esri:ElementLayer> </esri:Map> </Grid> </UserControl>
XAML代码中定义了一个ElementLayer,并在ElementLayer.Children集合中添加了Button、TextBlock、TextBox控件元素,通过Live Sample展示,可以发现:没有固定Width和Height的TextBlock和RectangleFill会随着地图的放大/缩小而放大/缩小,而固定Width和Height的Button和Editable textbox大小始终
不变。
如果要在地图上点击某点,弹出一个信息展示界面,ArcGIS API for Silverlight/WPF中已经有一些方法:
http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#MapTipWidget
http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#InfoWindowSimple
但是,如果要展示一个复杂的界面,这些方法可能满足不了我们的要求,比如自定义个UserControl,里面放置多种Windows控件,界面布局也可以自己控制,看这个例子:http://blog.newnaw.com/?p=600
其实现方法如下:
1、先画一个展示界面,比如一个UserControl名为InfoWindow,元素布局由自己控制。
2、声明一个ElementLayer,添加到图层中。
ElementLayer elementLayer; elementLayer = new ElementLayer(); myMap.Layers.Add(elementLayer);
3、在某个响应事件中,弹出展示界面
private void FeatureLayer_MouseLeftButtonDown(object sender, GraphicMouseButtonEventArgs e) { elementLayer.Children.Clear(); //清除上一次的展示界面 InfoWindow infoWindow = new InfoWindow(); //实例化一个界面 //设置ElementLayer的Envelope Graphic g = e.Graphic; ElementLayer.SetEnvelope(infoWindow, new Envelope((MapPoint)g.Geometry, (MapPoint)g.Geometry)); elementLayer.Children.Add(infoWindow); //将界面添加到ElementLayer }
我们来看看自定义界面UserControl的XAML代码:
<UserControl x:Class="InfoWindowOnElementLayer.InfoWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Canvas Width="200" Height="528"> <Grid Width="200" Height="240" Canvas.Left="0" Canvas.Top="0"> <!--Grid中定义其他元素控件--> </Grid> </Canvas> </UserControl>
UserControl中的Canvas和Grid的Width和Height是固定的,且Grid的Height是差不多是Canvas的一半,并处在Canvas的Left和Top方向,即Grid在Canvas的左上方,但是Grid的Width和Canvas的Width是一样的,这样Grid就在整个Canvas的上方,而Canvas的下半部分就为空,为什么要这样设置?因为如果不这样设置,按照上面事件中的响应代码,点击某点的时候,弹出的界面的中心就是点击的某点,这样设置后,用户看到的界面会在点击点的正上方,界面友好。类似的,如果要弹出的界面在点击点的右边,可以将Grid设置在Canvas的Right和Buttom方向,Width和Height为Canvas的一半。
这样设置可以解决弹出界面显示的位置问题,但是因为固定了Width和Height,当地图放大/缩小的时候,弹出界面就没法随地图一起放大/缩小了。