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>

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，當地圖放大/縮小的時候，彈出界面就沒法隨地圖一起放大/縮小了。