开发者社区> 杰克.陈> 正文

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

简介: 原文:ArcGIS API for Silverlight实现地图测距功能 问题:如何实现地图测距功能? 地图工具栏 ...
+关注继续查看
原文: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>


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

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




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ArcGIS API For JavaScript官方文档(六)之设置范围
ArcGIS API For JavaScript官方文档(六)之设置范围
67 0
ArcGIS API For JavaScript官方文档(一)之默认API配置
ArcGIS API For JavaScript官方文档(一)之默认API配置
84 0
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
39 0
arcgis api 3.X 修改自带弹窗样式 2022年6月12日
自带的弹窗介绍: arcgis api 3.X 修改自带弹窗样式插图 /*修改原有弹窗的css样式*/ /* 弹窗整体 */ .esriPopup { font-size: 16px; box-shadow: 10px 10px 5px #888888; } .esriPopup .sizer { position: relative; width: 400px; /* 弹窗宽度 */ z-index: 1; } /* 标题部分 */ .esriPopup .titlePane { background-color: rgba(7
20 0
ArcGIS API for JavaScript 4.10 重大更新,强势来袭!
ArcGIS API for JavaScript 4.10 版引入了大量新功能,并对原有功能进行了增强: 引入了一种新的建筑图层类型BuildingSceneLayer,用于可视化BIM数据; 新增众多微件,如3D剖切、草图绘制、二维面积和距离测量、改善编辑工作流的FeatureTemplates微件等; 地图中的所有图层均可使用WebGL进行绘制,从而提升渲染性能; 通过更高性能的 WebStyleSymbols增强了3D体验; 还有诸多精彩变化,下文将为您一一呈现。
2363 0
arcgis api for javascript之加载图层
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82116422 arcgis ap...
2256 0
ArcGIS API for JavaScript4.x 之加载2D、3D地图
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81545607 ArcGIS AP...
1364 0
arcgis api for javascript api下载及部署
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/79722643 开发API下载 文章地址:http://www.
1022 0
ArcGIS API for JavaScript超强部署方案
配置ArcGIS API for JavaScript,帮助入门的GISer跨过第一道门槛,同时也作为对工作的梳理、记录。
6509 0
ArcGIS API for JavaScript 标注错位问题解决思路
显示标注和符号的两个方案。一个FeatureLayer的,标注一直在图标的上方的固定位置,不会随距离的远近而出现错误,还有标注自动避让,实现不了换行,水利中墒情的三级标注的显示;另一个是基于GraphicsLayer的,这个的标注就是随距离拉近,符号和标注之间的距离增大,但是可以实现伪换行(多个标注),造成的问题就是距离一远,多个标注也会重叠.
2058 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载