ArcGIS for qml -测距

简介: 源码:https://github.com/sueRimn/ArcGIS-for-qml-demos实现求地图上两点之间距离功能版权声明:如需转载,请联系获得授权或者附上原文链接 这个功能主要实现鼠标在地图上点击两点进行测距。

源码:https://github.com/sueRimn/ArcGIS-for-qml-demos

实现求地图上两点之间距离功能

版权声明:如需转载,请联系获得授权或者附上原文链接

 

这个功能主要实现鼠标在地图上点击两点进行测距。

在ArcGIS for qml中是没有直接封装好的测距模块的,查看文档可以看见:

文档明确说明,不能在QML中声明或创建Distance组件

1.确认所需

实现测距功能,首先还是明确需求,利用鼠标点击进行测距,点击第一次确定起始点,第二次确定终点,终点确定,距离路径出现,随之距离显示出来。

由此可知,需要两个点一条路径一个文本

2.布局

(1)地图测距,地基肯定是地图底图,MapView{ Map{ } }

(2)要在地图上添加点以及路径,需要符号,所以需要图层来承载 GraphicsOverlay{ Graphic{ Symbol:}}

(3)显示距离,需要一个Text固定位置显示,在最上层 Text{ }

3.计算距离

(1)单位

查看文档中对Distance的说明,可以看的一个相关的类型叫liearUnit->实例或线性测量操作的特定测量单位

 

是从Unit类型继承的类型实例被初始化为特定的度量单位每个实例都具有单元名称的属性(单数,复数和缩写),并提供单位转换的方法。

往上查看linearUnit的父级可以看到

 

Unit是测量单位的基本类型,但是不允许在QML中进行声明和创建。但是Unit下面的子类型有三个:LinearUnit(线性单位)AngularUnit(度量单位)AreaUnit(面积单位)都是可以在qml中声明创建的。测距所需的肯定就是线性单位了。

(2)路径线(Path)

关于线段,几何图形都得由polygon来创建,路径是线段,所以选择其中PolylineBuilder,至于如何生成随机鼠标点击的两点之间的线呢

在文档中搜索Distance,可以得到6个类型结果

其中,有一个GeodeticDistanceResult 类型,距离结果,点开看发现不能在QMl中声明创建,但是有一句话

所以点击蓝色标注的地方,可以知道,几何引擎提供一组方法以对几何实例执行几何操作,关于几何的计算都可以在此找到。

有一个方法

返回点集成的线,所需参数都给出了,完全可以得到。这样就得到了path,path是起始点和终点之间的点集成的路径线,每个点之间的距离长度可以根据maxSegmentLength进行自行设置。

(3)计算

目前我们所需的就是如何得到地面距离长度,依然在几何引擎中找

所需要的参数依然很容易得到,所以可以完成功能了。

4.核心代码

 onMouseClicked: {
            clickNum++
            if(clickNum == 1){//鼠标点击第一次 确实起点位置 并添加图形
                console.log(clickNum)
                dis_startPoint = mouse.mapPoint
                //graphicsOverlayer.graphics.append(createGraphic(dis_startPoint,startMarkSymbol))
                var dis_start = GeometryEngine.project(dis_startPoint,spatialReference.createWgs84())
                dis_startGraphic.geometry = dis_start
                console.log(dis_startPoint)
            }
            if(clickNum == 2){//鼠标点击第二次 确定终点位置 并添加图形
                console.log(clickNum)
                clickNum = 0;
                dis_endPoint = mouse.mapPoint
                var dis_end = GeometryEngine.project(dis_endPoint,spatialReference.createWgs84())
                dis_endGraphic.geometry = dis_end
                console.log(dis_endPoint)
                //创建路径线
                var polylineBuilder = ArcGISRuntimeEnvironment.createObject("PolylineBuilder", {spatialReference:SpatialReference.createWgs84()});
                polylineBuilder.addPoints([dis_startGraphic.geometry,dis_endGraphic.geometry])
                var polyline = polylineBuilder.geometry;

                //生成路径线
                var maxSegmentLength = 1;
                var unitOfMeasurement = ArcGISRuntimeEnvironment.createObject("LinearUnit", {linearUnitId: Enums.LinearUnitIdKilometers});
                var curveType = Enums.GeodeticCurveTypeGeodesic;
                var pathGeometry = GeometryEngine.densifyGeodetic(polyline, maxSegmentLength, unitOfMeasurement, curveType);

                pathGraphic.geometry = pathGeometry;
                //计算距离
                distanceText = GeometryEngine.lengthGeodetic(pathGeometry,unitOfMeasurement,curveType).toFixed(2)
                console.log("polyline builded",distanceText + "km")
            }
        }

 关于如何在地图上点击添加自定义输入文本,简单实现了一个 ,在另一篇博文:ArcGIS for qml 添加自由文本》

相关文章
|
定位技术 开发工具
ArcGIS for qml -设置地图和视域中心
源码:https://github.com/sueRimn/ArcGIS-for-qml-demos  ArcGIS RunTime SDK 的官网 https://developers.arcgis.
1571 0
|
定位技术 存储
ArcGIS for qml -关于空间参考如何选择设置
1.关于空间参考 空间参考可以通过众所周知的ID(WKID) - 整数值来引用。 官网指南中也有对此的专门说明 https://developers.arcgis.com/qt/latest/qml/guide/spatial-references.htm 要将空间数据集成到地图中或执行分析时,ArcGIS Runtime必须知道地球表面上的位置,并使用坐标来执行此操作。
1121 0
|
定位技术 JavaScript
ArcGIS for qml -添加自由文本
源码:https://github.com/sueRimn/ArcGIS-for-qml-demos 实现地图上鼠标点击后添加自由文本功能 版权声明:如需转载,请联系获得授权或者附上原文链接  (没有录进鼠标)效果如下: 要想在地图上添加标注和图形,必须了解图层的概念。
1046 0
|
6月前
|
人工智能 数据可视化 API
ArcGIS API for Python
ArcGIS API for Python
33 0
|
10月前
|
JavaScript 前端开发 应用服务中间件
Arcgis api for javascript 详细部署
Arcgis api for javascript 详细部署
|
12月前
|
人工智能 数据可视化 数据管理
ArcGIS API for Python
ArcGIS API for Python
76 0
|
JavaScript 前端开发 定位技术
ArcGIS API For JavaScript官方文档(六)之设置范围
ArcGIS API For JavaScript官方文档(六)之设置范围
|
存储 JSON 前端开发
ArcGIS API For JavaScript官方文档(一)之默认API配置
ArcGIS API For JavaScript官方文档(一)之默认API配置
|
数据可视化 数据管理 API
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
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