一、前言说明

最近花了半年时间,专门重构了整个地图组件,之前写的比较粗糙,有点为了完成功能而做的,没有考虑太多拓展性和易用性。这套地图自检这几年大量的实际项目和用户使用下来,反馈了不少很好的建议和意见,经过这几年的整理,刚好趁着近期经济下行严重,抽出时间把整个地图组件重构一下,首要的任务就是搞个地图基类,然后子类分别实现不同地图的具体功能。

实际编码过程中发现,无论是百度地图还是高德地图或者天地图等,能够提取出来的共性特别多,甚至很多处理函数都一样,所以在地图基类mapobjbase的基础上,又单独搞了个mapobjfun静态函数类,专门放置的通用的js函数处理,比如设置地图中心,获取和设置缩放级别,坐标字符串传坐标对象等。这样可以节约大量的重复代码,同时万一有相同的处理,还可以直接改动一处就所有地图内核都通用。

在整个组件的重构过程中,遇到过很多疑难杂症,当你把各个地图厂家提供的js开发手册全部实现一遍的时候,会发现大厂的程序员也不是很有水平,也存在不少的bug,我们能做的就是尽量规避这些bug,绕弯解决,而不是硬要在这种bug上死耗。比如一个办法就是自己写js去实现一部分的功能,这样就可以非常巧妙的避开,这在我们平时的编程过程中是一个很好的习惯。

二、功能特点

  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,支持编译到安卓系统运行。

三、代码使用

  1. 将core_map(地图组件)/core_webview(浏览器组件)这两个组件目录拷贝到你的项目目录,并在pro中填写引入代码加入到你的项目中。$$PWD/../表示上级目录。
include ($$PWD/../core_map/core_map.pri)
include ($$PWD/../core_webview/core_webview.pri)
  1. 在pro中启用地图内核,比如百度地图内核对应需要在pro文件中增加一行定义 DEFINES += baidux。
  2. 引入头文件。
#include "webview.h"
#include "mapbase.h"
  1. 新建一个窗体,上面放一个布局,推荐用表格布局 gridlayout,可以放多个浏览器控件。
  2. 实例化浏览器类和地图类。
//实例化浏览器控件
WebView *webView = new WebView(this);
//加入到布局
webView->setLayout(ui->gridLayout);
//实例化地图类/参数2表示何种地图内核
MapBase *mapObj = MapHelper::getMapObj(this, MapCore_BaiDu);
//传入网页控件用于执行函数
mapObj->setWebView(webView);
//加载地图
mapObj->load();
  1. 所有地图相关的函数接口在MapBase类中,可以打开mapbase.h查看具体说明。
  2. 地图中大部分的功能都是通过执行js函数来触发,比如添加标注、添加折线图等。这些必须严格按照提供的js函数名称和参数来执行。对应示例都提供了相关的调用方法。
  3. 部分函数接口。
QString js;
//设置地图级别(值越大放大/越小缩小)
js = "setZoom(9)";
//街道图卫星图切换(0-街道图/1-卫星图/2-混合图)
js = "setMapType(1)";
//添加一个标记(北京那边)
js = QString("addMarker('测试点', '测试地址', '', '', 100, '%1', 2)").arg("116.475836,40.251114");
//最终通过浏览器控件执行
webView->runJs(js);
  1. 浏览器组件使用示例。
//实例化浏览器控件
WebView *webView = new WebView(this);
//加入到布局
webView->setLayout(ui->verticalLayout);
//打开网址
webView->load("https://www.xxx.com", "", "");

四、相关链接

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

五、效果图



















Qt/C++最新地图组件发布/历时半年重构/同时支持各种地图内核/包括百度高德腾讯天地图的更多相关文章

  1. Vue3.0中引入地图(谷歌+高德+腾讯+百度)

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  2. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  3. 微信小程序-地图组件

    map 地图. 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬 ...

  4. 第30课 Qt中的文本编辑组件

    1. 3种常用的文本编辑组件的比较 单行文本支持 多行文本支持 自定义格式支持 富文本支持 QLineEdit (单行文本编辑组件) Yes No No No QPlainTextEdit (多行普通 ...

  5. 【高德地图API】一句话搞定webmap(一)——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

  6. 一句话搞定webmap(一)——轻地图组件

    摘要: 遥想当年.在APP中增加LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript-- 而现在.要制作一张地图真是越来越easy了!居然仅仅须要一句话.就能够 ...

  7. vue-amap | 基于 Vue 2.x 与高德的地图组件

    vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

  8. AngularJS指令封装高德地图组件

    1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...

  9. 解析 Qt 程序在Windows 下发布

    原文请看:http://www.cnblogs.com/elect-fans/archive/2012/03/15/2408579.html Qt 程序在Windows下发布是本文要介绍的内容,不多说 ...

  10. vue项目中使用地图组件

    一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...

随机推荐

  1. wpf之样式

    在Window.Resources中书写样式 : <Window.Resources> <Style TargetType="Button" > </ ...

  2. vant2 自动检查表单验证 -validate

    ref 给 <van-form @submit="onSubmit" ref="form"> 标签 : // 检验手机号是否合格 await thi ...

  3. 000 通过 Pytorch 实现 Transformer 框架完整代码(带注释)

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  4. 云原生周刊:KubeSphere 3.4.1 发布 | 2023.11.13

    开源项目推荐 Inspektor Gadget Inspektor Gadget 是一组用于调试和检查 Kubernetes 资源与应用程序的工具(或小工具).它在 Kubernetes 集群中管理 ...

  5. KubeSphere 社区双周报 | Fluent Operator 发布 v2.5.0 | 2023.09.01-09.14

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...

  6. 云原生爱好者周刊:玩 Kubernetes 游戏,赢取免费机票

    云原生一周动态要闻: Grafana 8.2.2 发布 OSM(Open Service Mesh)发布 v1.0 的第一个候选版本 谷歌宣布推出 Google Distributed Cloud K ...

  7. ES检索服务搜索结果高亮

    一.前言 在实际使用中搜索结果中的关键词前端通常会以特殊形式展示,比如标记为红色使人一目了然.我们可以通过 ES 提供的高亮功能实现此效果. 二.代码实现 前文查询是通过一个继承 Elasticsea ...

  8. 【VMware VCF】使用 Offline Bundle Transfer Utility(OBTU)配置 VCF 脱机库。

    VMware Cloud Foundation 环境中,软件包仓库的来源支持两种方式,分别是 Online Depot 和 Offline Depot.第一种方式,是在 VCF 环境能够连接互联网的情 ...

  9. 题解:CSP-S2020] 函数调用

    题解:CSP-S2020] 函数调用 一句话题意:给定一个有初始值的序列,支持如下三种操作: 1.单点加 2.全局乘 3.递归某些操作1.2.3 求最终的序列. 标签:topsort,动态规划,转化贡 ...

  10. iptables防火墙规则介绍与配置

    防火墙简单介绍 防火墙根据什么对外网的进出数据流进行控制? 源IP.目标IP.源端口号.目标端口号.协议.指针位(SYN.FIN.ACK.RST).状态(NEW.ESTABLISHED.INVIAD) ...