一、前言说明

地图测距在地图组件中属于一个比较小众的功能,但是又不得不提供,有时候用户希望直接在地图上选点,测算距离,尤其是在一些军事领域用的比较多,测距功能提炼出来的共性就是,每一段都有距离,最后鼠标右键或者双击结束测距,然后发个信号传过来总的距离。一般地图厂家也都提供了对应的事件,比如百度地图的addpoint事件表示每次添加一段线条就触发,drawend事件表示测距完成。为了统一处理,统一定一个信号传出对应的测距过程和测距结束。

在天地图的js交互过程中,发现有抄袭百度地图的设计思路,addpoint表示每点下一个点是一段路线,draw事件表示测距结束。目前发现腾讯地图没有提供直接的测距功能,而是提供的集合运算库Math.round(qq.maps.geometry.spherical.computeDistanceBetween(start, end)。

二、相关代码

void MapObjBaiDu::addDistanceTool()
{
//添加测距工具/同时添加监听事件/监听点按下以及完成测距
html << QString(" var distanceTool;");
html << QString(" function initDistanceTool() {");
html << QString(" if (distanceTool) {return}");
html << QString(" distanceTool = new BMapLib.DistanceTool(map, {lineStroke:2});");
html << QString(" distanceTool.addEventListener('addpoint', function(e) {");
html << QString(" receiveData('distance', e.distance);");
html << QString(" });");
html << QString(" distanceTool.addEventListener('drawend', function(e) {");
html << QString(" receiveData('distanceend', e.distance);");
html << QString(" });");
html << QString(" }");
} void MapObjGaoDe::addDistanceTool()
{
//添加测距工具/同时添加监听事件/监听点按下以及完成测距
html << QString(" var distanceTool;");
html << QString(" function initDistanceTool() {");
html << QString(" if (distanceTool) {return}");
html << QString(" distanceTool = new AMap.RangingTool(map);");
html << QString(" distanceTool.on('addnode', function(e) {");
html << QString(" receiveData('distance', e.distance);");
html << QString(" });");
html << QString(" distanceTool.on('end', function(e) {");
html << QString(" receiveData('distanceend', e.distance);");
html << QString(" });");
html << QString(" }");
} void MapObjTian::addDistanceTool()
{
//添加测距工具/同时添加监听事件/监听点按下以及完成测距
html << QString(" var distanceTool;");
html << QString(" function initDistanceTool() {");
html << QString(" if (distanceTool) {return}");
html << QString(" distanceTool = new T.PolylineTool(map, {showLabel: true});");
html << QString(" distanceTool.addEventListener('addpoint', function(e) {");
html << QString(" receiveData('distance', getValue(e.currentDistance));");
html << QString(" });");
html << QString(" distanceTool.addEventListener('draw', function(e) {");
html << QString(" receiveData('distanceend', getValue(e.currentDistance));");
html << QString(" });");
html << QString(" }");
}

三、相关地址

  1. 文件地址:https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取码:o05q 文件名:bin_map.zip
  2. 国内站点:https://gitee.com/feiyangqingyun
  3. 国际站点:https://github.com/feiyangqingyun

四、效果图

五、功能特点

5.1 地图功能

  1. 支持多种地图内核,默认采用百度地图,可选高德地图、天地图、腾讯地图、谷歌地图等。
  2. 同时支持在线地图和离线地图两种模式,离线地图方便在不联网的场景中使用。
  3. 支持各种地图控件的启用,比如地图导航、地图类型、缩略图、比例尺、全景导航、实时路况、绘图工具、结果面板等。
  4. 支持多种地图功能的动态启用禁用,比如地图拖曳、键盘操作、滚轮缩放、双击放大、连续缩放、地图测距等。
  5. 提供众多js函数接口用于交互,参数极其丰富,能够想到的应用场景需求都有。
  6. 统一的信号槽机制,地图中的结果统一信号发送出去,收到后根据type类型区分。
  7. 支持地图交互,比如鼠标按下获取对应位置的经纬度。单击标注点弹出对应点的信息。
  8. 支持添加标注、删除标注、移动标注、清空标注。
  9. 标注点可以指定图标图片和尺寸,支持gif动图,支持指定以图片中心对齐还是底部中心对齐。可以设置旋转角度,带富文本提示信息。
  10. 标注点事件支持单击发信号通知和自己弹框显示信息。
  11. 提供地址转坐标和坐标转地址接口。
  12. 支持各种图形绘制,包括折线图、多边形、矩形、圆形、弧线等。
  13. 可显示悬浮的绘图工具栏,直接在地图上划线、标注点、矩形、圆形等。
  14. 支持各种区域搜索,比如矩形区域、圆形区域,可以按照关键字匹配将搜索结果显示在地图中。
  15. 可动态添加离线的行政区边界点数据。可以搜索行政区划并获取该区域的边界点数据。数据可以保存到文件以便离线使用。
  16. 支持点聚合功能,多个小标注点合并到一个大标注点,防止点密集导致交互不友好。
  17. 可以添加海量点,每个点都可以单击获取对应坐标和信息。
  18. 所有的覆盖物信息比如标注点、矩形、多边形、折线图等,都可以主动获取对应的信息比如坐标点和路径等。
  19. 支持路径规划,支持公交路线、自驾路线、步行路线、骑行路线,不同查询支持不同策略,可选最少时间、最少换乘、不走高架等。
  20. 路径规划结果可以显示在地图中,也可以获取到路径点坐标集合。这个数据可以保存到文件,以便发给机器人或者无人机做导航用来轨迹移动。
  21. 可以设置不同的地图视图比如街道图、卫星图、混合图。
  22. 可以设置不同的样式,比如午夜蓝、青草绿等样式风格。
  23. 可以设置地图的旋转角度和倾斜角度。
  24. 提供经纬度坐标纠偏转换功能,比如传入的GPS坐标需要转换到百度地图坐标或者高德地图坐标。各种坐标系转换全部离线函数,支持地球坐标系WGS-84、火星坐标系GCJ-02、百度坐标系BD-09之间的互相转换,涵盖了各种地图的坐标系。
  25. 提供动态轨迹点移动功能,按照给定的经纬度坐标集合平滑移动。
  26. 同时支持qwidget和qml,支持编译到安卓系统运行。

5.2 其他功能

  1. 提供离线地图下载模块,可以选择不同的地图内核比如百度地图或者谷歌地图,不同的地图类型比如下载街道图还是卫星图,不同的地图层级,多线程极速下载。
  2. 表格行实时显示对应的瓦片下载进度,有下载超时时间,重试次数,每个瓦片下载完成都发送信号通知,参数包括下载用时。
  3. 提供省市轮廓图下载模块,自动下载各个地区的轮廓图,保存到脚本文件或者文本文件。
  4. 支持手动调整不同区域的轮廓边界,调整后可以主动获取调整后的边界点集合。
  5. 提供动态点位示例,手动在地图上选点并添加标注,附带自定义的信息比如速度和时间等。
  6. 提供海量点位示例,批量添加标注点、点聚合、海量点。用于测试环境中支持的最大点位性能。
  7. 提供动态轨迹示例,在地图上鼠标按下选择起点和终点后,查询路线,获取路径轨迹点,模拟轨迹平滑移动。可以筛选数据将过多的路径点筛选到设定的点数。
  8. 提供轨迹回放示例,按照指定的轨迹点列表回放,也可以导入轨迹点数据进行回放。同时支持在街道图、卫星图、混合图中回放轨迹。
  9. 提供省市区域地图示例,采用echart组件,同时支持闪烁点图、迁徙图、区域地图、世界地图、仪表盘等。可以设置标题、提示信息、背景颜色、文字颜色、线条颜色、区域颜色等各种颜色。
  10. 省市区域地图示例,内置世界地图、全国地图、省份地图、地区地图,可以精确到县,所有地图全部离线使用。可设置城市的名称、值、经纬度集合。
  11. 内置通用浏览器组件,同时支持webkit/webengine/miniblink等内核。提供网页控件示例,演示打开网页和本地网页文件。
  12. 支持任意Qt版本、任意系统、任意编译器。

Qt/C++地图测距/显示不同线段的距离/拿到测距结果/测距结束信号的更多相关文章

  1. GPS坐标显示在百度地图上(Qt+百度地图)

    Qt在5.6以后的版本就不支持webview控件了,这里我用的是Qt5.4的版本,里面还有这个控件: 下面简单介绍下Qt与html中的javascript调用交互过程: 一.整体实现介绍 在html中 ...

  2. [转]使用QT开发GoogleMap瓦片显示和下载工具

    第一节 之前做项目的时候经常遇到需要大量地图背景数据,然后没有数据被逼着去Google上下载瓦片数据在拼接成整张影像的工作,其实遥感影像晚上有很多可以下载到的,但是大部分是作为研究用的,作为GIS的背 ...

  3. leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  4. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  5. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  6. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  7. iOS_地图之显示附近微博

          1.首先需要新建一个MKMapView地图对象,在storyBoard中拖拽一个,在工程中导入MapKit.framework: 2.遵守MKMapViewDelegate协议,设定显示地 ...

  8. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  9. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  10. 【百度地图API】如何制作可拖拽的沿道路测距

    原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后 ...

随机推荐

  1. input 的hidden 属性

    hidden 会隐藏input 标签内容显示,不占位置 : <input type="file" name="" id="" ref= ...

  2. vue3自动导入 api ,不需要多次导入 api 了

    安装插件   npm i -D unplugin-auto-import 配置 vite.config.js export default defineConfig({ plugins: [ vue( ...

  3. 43.v-if和v-for的优先级

    v-for 的优先级高 延申问题:v-for 和 v-if 为什么不能在一起使用 ? 会造成性能的浪费,因为v-for 的优先级高,所以每次渲染都会执行v-if 判断条件,浪费时间 :比如 渲染 10 ...

  4. 使用NodeJS 搭建 Vue + TypeScipt 快速构建工具

    使用 NodeJS 搭建 Vue + TypeScipt 快速构建工具 前言: 为保证使用 Typescript 开发 Vue 的规范性和开发效率,添加组件.页面.路由.store 的时候尽量使用工具 ...

  5. JuiceFS CSI:Mount Pod 的平滑升级及其实现原理

    当集群中需要升级 Mount Pod 时,目前推荐的方式是更新配置后重新挂载应用 Pod 进行滚动升级,但这种升级方式的问题在于需要业务重启. 如果对业务的使用模式很清楚时,比如没有数据写入等,也可以 ...

  6. isObjectLike:检查 value 是否是 类对象。 如果一个值是类对象,那么它不应该是 null,而且 typeof 后的结果是 "object"

    function isObjectLike(value) { return value != null && typeof value == 'object';}

  7. mysql8 安装后无法登录的问题

    使用 apt 安装mysql 先search一下 sudo apt search mysql 得到结果 找到了这个 发现是8 那就装吧 sudo apt-get install mysql-serve ...

  8. 高性能计算-gemm-mpi并行计算优化(8)

    1. 目标: 矩阵A(MK) 矩阵B(KN)相乘,计算结果 C(M*N);本测试将使用不同的数据分块方式.MPI通信接口.数据循环模型,测试通信及计算效率,计算耗时为程序用户态和核心态的占用cpu时间 ...

  9. select2的搜索框不能输入内容

    select2的搜索框不能输入内容 原因:原来是模态对话框强制使自己处于焦点状态,导致select2的搜索框无法获取焦点所致. 解决办法:在初始化中重写模态对话框的enforceFocus函数 $.f ...

  10. Java深度历险(四)——Java垃圾回收机制与引用类型

    Java语言的一个重要特性是引入了自动的内存管理机制,使得开发人员不用自己来管理应用中的内存.C/C++开发人员需要通过malloc/free 和new/delete等函数来显式的分配和释放内存.这对 ...