ArcGIS ElementLayer上放置Windows控件

ArcGIS ElementLayer上放置Windows控件

阿凡卢 https://www.cnblogs.com/luxiaoxun/p/3322218.html

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

http://www.cnblogs.com/luxiaoxun/
https://www.cnblogs.com/luxiaoxun/p/3322218.html