Qt编写地图综合应用48-地球模式、三维模式、地铁模式

一、前言

百度地图本身提供了普通模式、地球模式、三维模式、地铁模式等好多种，普通模式是最常用的默认的，就是那个街道图和卫星图的，而地球模式和三维模式是最近几年才新增加的，为了迎合现在越来越多的用户的需求，地球模式和三维模式需要使用新的API接口，之前都是BMAP开头，而他是BMAPGL开头，连点坐标等对象都是BMAPGL.Point之类的对象了，看名字就知道这些玩意估计都用了opengl之类的玩意来实现和渲染。

除了传统的街道图地图外，默认的一般都是街道图，还有卫星图、三维图等，其中又有叠加层，比如叠加路况图层和路网图层等，最近去了多家的地图官网看对应的api接口，总体上感觉现在都往2.5D或者3D这块发展，估计这也是未来的一个大趋势，记得有个长辈程序员，花了很多年专门研究opengl之类的玩意，将现有的电网系统换成了3D的，甚至取了个高大上的名字叫世界电网互联系统，直接可以旋转一个球体，查看各种电网路线等，而且现在的安防行业好像也在往3D方向发展，甚至和物联网结合，以3D的模式呈现一栋大楼或者一个小区的三维场景，报警点也是三维呈现，这个效果非常惊艳，一不小心就把大领导震撼了，然后经费就来了。

二、功能特点

同时支持在线地图和离线地图两种模式。
同时支持webkit内核、webengine内核、miniblink内核、IE内核。
支持设置多个标注点，信息包括名称、地址、经纬度。
可设置地图是否可单击、拖动、鼠标滚轮缩放。
可设置协议版本、秘钥、主题样式、中心坐标、中心城市、地理编码位置等。
可设置地图缩放比例和级别，缩略图、比例尺、路况信息等控件的可见。
支持地图交互，比如鼠标按下获取对应位置的经纬度。
支持查询路线，可设置起点位置、终点位置、路线模式、路线方式、路线方案（最少时间、最少换乘、最少步行、不乘地铁、最短距离、避开高速）。
可显示点线面工具，可直接在地图上划线、点、矩形、圆形等。
可设置行政区划，指定某个城市区域绘制图层，在线地图自动输出行政区划边界点集合到js文件给离线地图使用。
可静态或者动态添加多个覆盖物。支持点、折线、多边形、矩形、圆形、弧线、点聚合等。
提供函数接口处理经纬度解析成地址和地址解析成经纬度坐标。
提供的demo直接可以单独选点执行对应的处理比如路线查询。
可以拿到路线查询到的点坐标信息集合，比如用于机器人坐标导航等。
封装了丰富的函数比如删除指定点和所有点，删除指定覆盖物和所有覆盖物等。
标注点弹框信息可以自定义内容，标准html格式。
标注点单击事件可选 0-不处理 1-自己弹框 2-发送信号。
标注点可设置动画效果 0-不处理 1-跳动 2-坠落
标注点可设置本地图片文件等。
函数接口友好和统一，使用简单方便，就一个类。
支持js动态交互添加点、删除点、清空点、重置点，不需要刷新页面。
支持任意Qt版本、任意系统、任意编译器。

三、体验地址

体验地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取码：o05q 文件名：bin_map.zip
国内站点：https://gitee.com/feiyangqingyun
国际站点：https://github.com/feiyangqingyun
个人主页：https://blog.csdn.net/feiyangqingyun
知乎主页：https://www.zhihu.com/people/feiyangqingyun/

四、效果图

五、相关代码

void MapBaiDu::addHead(QStringList &list)

{

    //构建网页头部

    list << QString("<html>");

    list << QString("<head>");

    list << QString("<title>%1</title>").arg(title);

    list << QString("<meta charset=\"utf-8\">");

    list << QString("<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">");

    //地图页面样式

    list << QString("<style type=\"text/css\">");

    //全局字体+页面宽度高度占比+边距等

    list << QString("  html,body{font-family:微软雅黑;height:100%;width:100%;margin:0px;padding:0px;}");

    //隐藏左下角的logo

    list << QString("  .anchorBL{opacity:0;}");

    if (startAddr.isEmpty()) {

        list << QString("  #map{height:100%;width:100%;}");

    } else {

        list << QString("  #map{height:%1px;width:100%;}").arg(height);

        list << QString("  #result,#result table{width:100%;font-size:12px;}");

    }

    //webkit浏览器滚动条样式

    list << QString("  ::-webkit-scrollbar{width:0.8em;}");

    list << QString("  ::-webkit-scrollbar-track{background:rgb(241,241,241);}");

    list << QString("  ::-webkit-scrollbar-thumb{background:rgb(188,188,188);}");

    list << QString("</style>");

    //引入webchannel.js

#ifdef webengine

    list << QString("<script type=\"text/javascript\" src=\"qwebchannel.js\"></script>");

#endif

    //在线和离线地图加载的文件路径不一样

    if (mapLocal) {

        //引入地图JS文件

        list << QString("<script type=\"text/javascript\" src=\"map_load.js\"></script>");

        //引入CurveLine JS文件,只有当绘制弧线的时候才需要,如果不需要绘制弧线可以注释

        list << QString("<script type=\"text/javascript\" src=\"tools/CurveLine.min.js\"></script>");

        //加载点聚合需要下面两个js文件

        list << QString("<script type=\"text/javascript\" src=\"tools/TextIconOverlay_min.js\"></script>");

        list << QString("<script type=\"text/javascript\" src=\"tools/MarkerClusterer_min.js\"></script>");

        //引入行政区划轮廓图JS文件

        list << QString("<script type=\"text/javascript\" src=\"citypointjs/%1.js\"></script>").arg(cityJsName);

        //引入鼠标绘制工具JS文件

        if (showOverlayTool) {

            list << QString("<script type=\"text/javascript\" src=\"tools/DrawingManager_min.js\"></script>");

            list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"tools/DrawingManager_min.css\"/>");

        }

    } else {

        //引入地图JS文件 0-默认 1-地球 3-地铁

        if (mapType == 0) {

            if (mapFlag == "BMapGL") {

                list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?type=webgl&v=%1\"></script>").arg(mapVersionKey);

            } else {

                list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=%1\"></script>").arg(mapVersionKey);

            }

        } else if (mapType == 1 || mapType == 2) {

            list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?type=webgl&v=%1\"></script>").arg(mapVersionKey);

        } else if (mapType == 3) {

            list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?type=subway&v=%1\"></script>").arg(mapVersionKey);

        }

        //引入CurveLine JS文件,只有当绘制弧线的时候才需要,如果不需要绘制弧线可以注释

        list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js\"></script>");

        //加载点聚合需要下面两个js文件

        list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js\"></script>");

        list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js\"></script>");

        //引入轨迹图动画js文件

        list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js\"></script>");

        //引入实时路况JS文件

        if (showTrafficControl) {

            list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js\"></script>");

            list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css\"/>");

        }

        //引入鼠标绘制工具JS文件

        if (showOverlayTool) {

            list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js\"></script>");

            list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css\"/>");

        }

    }

    list << QString("</head>");

}

Qt编写地图综合应用48-地球模式、三维模式、地铁模式的更多相关文章

Qt编写项目作品大全（自定义控件+输入法+大屏电子看板+视频监控+楼宇对讲+气体安全等）
一.自定义控件大全 (一).控件介绍超过160个精美控件,涵盖了各种仪表盘.进度条.进度球.指南针.曲线图.标尺.温度计.导航条.导航栏,flatui.高亮按钮.滑动选择器.农历等.远超qwt集成的 ...
Qt编写安防视频监控系统（界面很漂亮）
一.前言视频监控系统在整个安防领域,已经做到了烂大街的程序,全国起码几百家公司做过类似的系统,当然这一方面的需求量也是非常旺盛的,各种定制化的需求越来越多,尤其是这几年借着人脸识别的东风,发展更加迅 ...
Qt编写数据可视化大屏界面电子看板系统
一.前言目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合, ...
Qt编写可换肤的中文双拼汉字输入法
时间过得真快,不知不觉已到2015年,农历春节一眨眼就过去了,端正状态收拾心情整装待发出发. 曾经有段时间,我有一个很执着的梦想,我要导演出一部空前绝后的巨幕.不过现实无情地碾碎我的梦想,也同时将我推 ...
Qt编写的开源帖子集合（懒人专用）
回顾自己学习Qt以来九年了,在这九年多时间里面,从本论坛学习不到不少的东西,今天特意整了一下自己开源过的资源的帖子,整理一起方便大家直接跳转下载,不统计不知道,一统计吓一跳,不知不觉开源了这么多代码, ...
Qt编写气体安全管理系统10-数据导出
一.前言数据导出一般指导出到excel表格,可能有部分用户还需要导出到pdf,因为pdf基本上不可编辑,防止用户重新编辑导出的数据,excel可能绝大部分用过电脑的人都知道,广为流行,主要就是微软的 ...
Qt编写自定义控件38-高亮按钮
一.前言高亮按钮控件,既可以作为类似于交通指示灯使用,也可以作为设备状态指示灯使用,控件内置多套颜色风格,还可以自己设置颜色风格,按钮可以增加文字显示,非常适合需要在状态设备上显示小量的文字展示,按 ...
Qt编写自定义控件二动画按钮
现在的web发展越来越快,很多流行的布局样式,都是从web开始的,写惯了Qt widgets 项目,很多时候想改进一下现有的人机交互,尤其是在现有的按钮上加一些动画的效果,例如鼠标移上去变大,移开还原 ...
Qt编写自定义控件11-设备防区按钮控件
前言在很多项目应用中,需要根据数据动态生成对象显示在地图上,比如地图标注,同时还需要可拖动对象到指定位置显示,能有多种状态指示,安防领域一般用来表示防区或者设备,可以直接显示防区号,有多种状态颜色指 ...
Qt编写自定义控件10-云台仪表盘
前言做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程 ...

随机推荐

使用 vue2 + element-ui 登录的时候的逻辑
1. 自动校验表单逻辑 // 1. 自动表单验证 try { // 这个形式自动表单验证麻烦 // this.$refs.loginForm.validate((valid)=>{ ... }) ...
Nuxt.js 应用中的 kit：compatibility 事件钩子详解
title: Nuxt.js 应用中的 kit:compatibility 事件钩子详解 date: 2024/10/11 updated: 2024/10/11 author: cmdragon e ...
云原生爱好者周刊：使用 AWS 开源的 FireCracker 来创建和管理 K8s 集群
开源项目推荐 KubeFire 这个项目比较有创意,它使用 AWS 开源的轻量级虚拟化项目 FireCracker 来创建和管理 Kubernetes 集群,摒弃了传统的 qcow2 和 vhd 等虚 ...
AI实战篇：Spring AI + 混元手把手带你实现企业级稳定可部署的AI业务智能体
前言在之前的内容中,我们详细讲解了Spring AI的基础用法及其底层原理.如果还有小伙伴对此感到困惑,欢迎参考下面这篇文章,深入学习并进一步掌握相关知识:https://www.cnblogs.c ...
RocketMQ 5.0 如何配置TLS加密传输？
本文作者:李伟,社区里大家叫小伟,Apache RocketMQ Committer,RocketMQ Python客户端项目Owner ,Apache Doris Contributor,腾讯云Ro ...
mse~路由实现某个页面的灰度功能
起因我有个网站A[蓝色服务],要对网站A进行改版[绿色服务],其中用户中心已经改完了,希望当用户访问时,如果http请求头中包含isGroup,并且isGroup=0时,去新的绿色服务,反之就还是去 ...
关于如何更改Cuda的版本的一些事情
1. 网上说的很全面了,这里我把我遇到的一些问题和解决方案罗列出来,以便未来的学习和了解. 博客的好处就体现出来了,下次你再用这个东西,就直接打开你的博客照抄就行了,不用东搜西搜了,及其方便,这种碎片 ...
spring生态体系
spring boot使用默认开发配置来实现快速开发spring xd用来简化大数据应用开发spring cloud为分布式系统开发提供工具集spring data对主流的关系型和nosql数据库的支 ...
LLM应用实战: AI资讯的自动聚合及报告生成
1.背景花了整整两天时间,本qiang~开发了一个关于AI新闻资讯的自动聚合及报告生成工具. 本篇记录一下整体的框架和实现原理,并且本着它山之石可以攻玉,本qiang~开放了所有的源码,源码可见如下 ...
[异常笔记] zookeeper集群启动异常：Error contacting service. It is probably not running.
報錯信息 zookeeper服務已經啓動,但是狀態是Error contacting service. It is probably not running. 2021-02-23 21:00:41, ...