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>


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

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




相关文章
|
17天前
|
架构师 安全 物联网
Apipost vs Apifox:高效API协作的差异化功能解析
作为企业级API架构师,深度体验APIPost与Apifox后发现几大亮点功能。目录级参数配置避免全局污染;WebSocket消息分组提升长连接管理效率;Socket.IO支持解决特定协议需求;接口锁定保障团队协作安全。大型团队适合APIPost的细粒度管控,复杂物联网项目需WebSocket分组,维护遗留系统离不开Socket.IO支持,初创团队可按需灵活选择。这些特性显著优化开发协作质量。
|
15天前
|
API 开发者 Python
如何在API中实现搜索和过滤功能
本文介绍了如何为API添加搜索和过滤功能,使其更强大灵活。通过Flask示例,展示了按书名搜索、按作者或年份过滤书籍的方法,并结合两者实现复合查询。同时,提供了搜索不区分大小写、支持多过滤器组合、分页和输入验证等最佳实践。最后推荐了Apipost工具,它能简化API调试、负载测试及文档生成,提升开发效率。这些功能帮助用户更好地控制数据,优化API使用体验。
|
1天前
|
JSON API 数据格式
一文读懂天猫商品详情 API 接口:功能、调用与实战攻略
天猫商品详情API为电商从业者、开发者和数据分析人员提供高效的商品数据获取途径。通过输入商品ID,可获取商品基本信息(名称、品牌等)、价格信息(售价、促销价等)、库存状态、商品描述及图片链接等详细内容。本文还提供了Python调用示例,包含签名生成、参数构建与请求发送等功能,帮助用户快速集成API,满足定价优化、市场分析等需求。使用时需替换示例中的AppKey与商品ID,并遵守平台规范。
40 16
|
21天前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
|
29天前
|
供应链 搜索推荐 API
一文读懂:京东、淘宝、拼多多 API 接口,功能大不同,场景各有招
本文深入解析京东、淘宝、拼多多三大电商巨头的API接口特点与差异。京东API以商品管理、订单处理和物流跟踪见长,适合电商平台及零售商;淘宝API功能丰富,涵盖商品查询、订单管理与用户认证,适用多场景电商业务;拼多多API聚焦社交电商,提供拼团、砍价等特色玩法,助力商家提升曝光与销量。开发者和商家需根据自身需求选择合适的API接口,并关注其安全性与稳定性。随着技术进步,这些API将持续优化,推动电商行业蓬勃发展。
|
1月前
|
存储 编解码 资源调度
鸿蒙相机开发实战:从设备适配到性能调优 —— 我的 ArkTS 录像功能落地手记(API 15)
本文分享鸿蒙相机开发经验,从环境准备到核心逻辑实现,涵盖权限声明、模块导入、Surface关联与分辨率匹配,再到录制控制及设备适配法则。通过实战案例解析,如旋转补偿、动态帧率调节和编解码优化,帮助开发者掌握功能实现、设备适配与体验设计三大要点,减少开发坑点。适合鸿蒙新手及希望深化硬件交互能力的工程师参考收藏。
91 2
|
16天前
|
人工智能 缓存 前端开发
通过API接口实现1688图片搜索商品功能全攻略
本文详细介绍如何通过API接口实现1688图片搜索商品功能,并对接至自有系统。核心流程包括:用户上传图片后,利用百度AI图像识别API提取特征并生成关键词,再调用1688开放平台的商品搜索接口获取结果。技术方案采用Python开发,涵盖前端交互设计与后端集成要点,如接口服务化、缓存机制及异常处理。此外,文章还提供了性能优化建议和数据解析示例,适用于电商平台及多种扩展场景。
|
1月前
|
SQL 关系型数据库 MySQL
|
1月前
|
人工智能 自然语言处理 JavaScript
鸿蒙 Next 对接 AI API 实现文字对话功能指南
本指南介绍如何在鸿蒙 Next 系统中对接 AI API,实现文字对话功能。首先通过 DevEco Studio 创建项目并配置网络权限,选择合适的 AI 服务(如华为云或百度文心一言)。接着,使用 Node.js 转发请求,完成客户端与服务器端代码编写。最后进行功能测试与优化,确保多轮对话顺畅、性能稳定。此过程需严格遵循开发规范,充分利用系统资源,为用户提供智能化交互体验。
|
1月前
|
SQL Java 关系型数据库

热门文章

最新文章