ArcGIS ElementLayer上放置Windows控件

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代码来实现的：

<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="&lt;=" 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="=&gt;" 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>

View Code

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，当地图放大/缩小的时候，弹出界面就没法随地图一起放大/缩小了。