ArcGIS API for Silverlight实现地图测距功能

简介: 问题:如何实现地图测距功能?地图工具栏 ...

问题:如何实现地图测距功能?


地图工具栏


 <Grid x:Name="gToolMenu"  Height="100" VerticalAlignment="Top" Opacity="0.8" HorizontalAlignment="Right" Width="467">
            <Rectangle Fill="#22919191" RadiusX="10" RadiusY="10" Margin="0,0,0,6" >
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Rectangle Fill="#CCFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="5,10,5,10" />
            <StackPanel Orientation="Vertical">
                <esri:Toolbar x:Name="MyToolbar" MaxItemHeight="80" MaxItemWidth="80"
                    VerticalAlignment="Top" HorizontalAlignment="Center"
                    Loaded="MyToolbar_Loaded"
                    ToolbarItemClicked="MyToolbar_ToolbarItemClicked" 
                    Width="458" Height="80">
                    <esri:Toolbar.Items>
                        <esri:ToolbarItemCollection>
                            <esri:ToolbarItem Text="Zoom In">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_zoomin.png" Stretch="Uniform" Margin="5" />
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Zoom Out">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_zoomout.png" Stretch="Uniform" Margin="5" />
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Pan">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_pan.png" Stretch="Uniform" Margin="5" />
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Measure Length">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_measure.png" Margin="5">
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                                <esri:MeasureAction TargetName="myMap" AreaUnit="SquareMeters"  MeasureMode="Polyline" DistanceUnit="Kilometers"   FillSymbol="{StaticResource DefaultFillSymbol}"  
DisplayTotals="True" MapUnits="Kilometers"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
                                    </Image>
                                </esri:ToolbarItem.Content>

                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Previous Extent" >
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_previous.png" IsHitTestVisible="False" Opacity="0.3" Stretch="Uniform" Margin="5"/>
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Next Extent">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_next.png" IsHitTestVisible="False" Opacity="0.3" Stretch="Uniform" Margin="5"/>
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Full Extent">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_globe.png" Stretch="Uniform" Margin="5" />
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>
                            <esri:ToolbarItem Text="Full Screen">
                                <esri:ToolbarItem.Content>
                                    <Image Source="Images/i_widget.png" Stretch="Uniform" Margin="5" />
                                </esri:ToolbarItem.Content>
                            </esri:ToolbarItem>

                        </esri:ToolbarItemCollection>
                    </esri:Toolbar.Items>
                </esri:Toolbar>
            </StackPanel>
        </Grid>

上面是工具栏代码,测距的xaml代码从中抽取如下:

 <esri:ToolbarItem Text="Measure Length">
     <esri:ToolbarItem.Content>
               <Image Source="Images/i_measure.png" Margin="5">
                       <i:Interaction.Triggers>
                               <i:EventTrigger EventName="MouseLeftButtonDown">
                                      <esri:MeasureAction TargetName="myMap" AreaUnit="SquareMeters"  MeasureMode="Polyline" DistanceUnit="Kilometers"   FillSymbol="{StaticResource DefaultFillSymbol}"  
DisplayTotals="True" MapUnits="Kilometers"/>
                              </i:EventTrigger>
                        </i:Interaction.Triggers>
               </Image>
     </esri:ToolbarItem.Content>
 </esri:ToolbarItem>


代码分析:

为图片Image添加Triggers,监听Image的鼠标左键按下事件,然后执行MeasureAction,目标是myMap地图,测量方式是Polyline,单位是千米(Kilometers),符号使用的是一个静态资源。


 <esri:ToolbarItem Text="Measure Length">
              <esri:ToolbarItem.Content>
                             <Image Source="Images/i_measure.png" Margin="5">
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                                <esri:MeasureAction TargetName="myMap" AreaUnit="SquareMeters"  MeasureMode="Polyline" DistanceUnit="Kilometers"   FillSymbol="{StaticResource DefaultFillSymbol}"  
DisplayTotals="True" MapUnits="Kilometers"/>
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
                           </Image>
        </esri:ToolbarItem.Content>
</esri:ToolbarItem>


当按下测距按钮时,可以在地图上画线测距了,效果如下图:


注:其它要注意引用的地方

 xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 

<Grid.Resources>

        <esri:SimpleFillSymbol x:Key="DefaultFillSymbol" BorderBrush="Red" BorderThickness="1"/>
 </Grid.Resources>


===========================================================================

如果觉得对您有帮助,微信扫一扫支持一下:




相关文章
|
21天前
|
监控 应用服务中间件 API
API 网关的功能用途及实现方式
API 网关的功能用途及实现方式
|
1月前
|
Web App开发 人工智能 前端开发
【Web API系列】使用getDisplayMedia来实现录屏功能
【Web API系列】使用getDisplayMedia来实现录屏功能
42 0
|
4月前
|
人工智能 NoSQL 定位技术
标准地图的矢量模板,ArcGIS可打开
标准地图的矢量模板,ArcGIS可打开
71 0
|
1天前
|
文字识别 安全 API
阿里云文字识别OCR的发票凭证识别功能可以通过API接口的形式进行调用
【2月更文挑战第5天】阿里云文字识别OCR的发票凭证识别功能可以通过API接口的形式进行调用
15 5
|
19天前
|
缓存 应用服务中间件 Linux
如何使用OpenResty实现API网关功能
如何使用OpenResty实现API网关功能
27 0
|
23天前
|
小程序 IDE API
【社区每周】API中心新增“订阅”功能;搜索新增“大家都在看”(11月第三期)
【社区每周】API中心新增“订阅”功能;搜索新增“大家都在看”(11月第三期)
29 0
|
28天前
|
运维 监控 前端开发
功能强大的国产API管理神器 Eolink,亲测好用
功能强大的国产API管理神器 Eolink,亲测好用
14 0
功能强大的国产API管理神器 Eolink,亲测好用
|
1月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
2月前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图,这3个怎么对起来?
DataWorks中API、desc、数据地图,这3个怎么对起来?
31 0
|
2月前
|
人工智能 编解码 定位技术
ArcGIS导出AI或EPS格式的地图图片并在Adobe Illustrator中继续编辑
ArcGIS导出AI或EPS格式的地图图片并在Adobe Illustrator中继续编辑