Qt编写地图综合应用28-闪烁点图
一、前言
Qt除了内置了各种UI组件以外,还直接集成了浏览器控件,注意哦这可是跨平台的浏览器控件哦,在5.6版本以前集成的是webkit,以后集成的是webengine,使得程序的灵活性拓展性大大增强了,眼看着web界那些牛逼炫的不要不要的界面,借助浏览器控件就可以无缝对接到Qt程序中,甚至还可以做各种交互,目前已知这种类似的框架好像挺多的,而且还挺流行,比如网易云音乐客户端、钉钉客户端、飞书客户端等都是用类似的机制来实现的,将浏览器作为本地应用程序。
Qt作为一个超大型的一站式GUI超市开发集成环境,不仅集成了大量的可视化UI组件,还提供了网络库、数据库操作、文件操作等类库,封装的还是相当精彩一步到位,根据个人身边的一些程序员朋友了解,自从用了Qt以来发现越来越喜欢用Qt本身的类来处理,除非一些要求很高的应用场景比如并发网络才需要去使用第三方库,不然就是直接使用Qt封装好的类,用起来非常爽,尤其是类的名称和方法的名称,几乎很自然的就能打出来。
之前用Qt写那个大屏大数据电子看板系统的时候,为了满足用户需要,大屏中间加一个牛逼的炫酷的闪烁点图,首先想到的就是借用echart了,毕竟就是现成的开源的东西,而且官网还有各种各样的demo告诉你怎么使用,只要是个入门级别的水平基本上都可以搞定,也就是从那时候开始对echart的操作用Qt做了一些封装,以便下次直接使用类即可。
闪烁点图的核心有三个要素,城市的名称、城市的经纬度、对应值的大小,当值越大闪烁点也就越大,闪烁点在平时呈现出一种呼吸的动作,开起来活着的感觉,至于echart是如何用js如何绘制的这个我们基本不关心,而且打开那里边的js代码开起来也挺费劲,对于我们大部分使用者来说,我只需要知道怎么使用即可,不必关心细节,吃饱了撑的有空可以去细细研究。
二、功能特点
- 同时支持闪烁点图、迁徙图、区域地图、世界地图、仪表盘等。
- 可以设置标题、提示信息、背景颜色、文字颜色、线条颜色、区域颜色等各种颜色。
- 可设置城市的名称、值、经纬度 集合。
- 可设置地图的放大倍数、是否允许鼠标滚轮缩放。
- 内置世界地图、全国地图、省份地图、地区地图,可以精确到县,所有地图全部离线使用。
- 内置了各省市json数据文件转js文件功能,如有数据更新自行转换即可,支持单个文件转换和一键转换所有文件。
- 内置了从json文件或者js文件获取该区域的所有名称和经纬度信息集合的功能,可以通过该方法获取到信息用来显示。
- 依赖浏览器组件显示地图,提供的demo支持webkit/webengine/miniblink/ie 多种方式加载网页。
- 采用miniblink浏览器内核打通了Qt5.6及后续版本+mingw编译器缺少浏览器模块的遗憾,使得整个项目支持所有Qt版本,亲测4.7到6.2等任意版本。
- 闪烁点迁徙图等设置的点支持单独设置颜色。
- 提供接口直接获取点击的点相关信息,方便程序联动处理。
- 拓展性极强,可以依葫芦画瓢自行增加各种精美的echarts组件,做出牛逼的效果。
- 内置的仪表盘组件提供交互功能,demo演示中包含了对应的代码。
- 函数接口友好和统一,使用简单方便,就一个类。
- 支持任意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/
四、效果图
五、相关代码
//核心代码
QString Echarts::newChartPoint()
{int cityNameCount = cityName.count();int cityValueCount = cityValue.count();int cityPointCount = cityPoint.count();if (cityNameCount != cityValueCount || cityValueCount != cityPointCount) {return "";}QStringList body;//添加对应的值,值越大圆越大QStringList values;for (int i = 0; i < cityNameCount; i++) {values << QString("{name: '%1', value: %2}").arg(cityName.at(i)).arg(cityValue.at(i));}//添加对应的经纬度QStringList points;for (int i = 0; i < cityNameCount; i++) {points << QString("'%1':[%2]").arg(cityName.at(i)).arg(cityPoint.at(i));}body << QString(" var data = [%1]").arg(values.join(","));body << QString(" var geoCoordMap = {%1};").arg(points.join(","));//转换数据QStringList datas;datas << QString("var convertData = function (data) {");datas << QString(" var res = [];");datas << QString(" for (var i = 0; i < data.length; i++) {");datas << QString(" var geoCoord = geoCoordMap[data[i].name];");datas << QString(" if (geoCoord) {");datas << QString(" res.push({");datas << QString(" name: data[i].name,");datas << QString(" value: geoCoord.concat(data[i].value)");datas << QString(" });");datas << QString(" }");datas << QString(" }");datas << QString(" return res;");datas << QString("};");body << " " + datas.join("\r\n ");body << "";QStringList optionBase = getOptionBase();QStringList optionGeo = getOptionGeo();QStringList optionSeries;optionSeries << QString(" name: '%1',").arg(tipTitle);optionSeries << QString(" type: 'effectScatter',");optionSeries << QString(" coordinateSystem: 'geo',");optionSeries << QString(" data: convertData(data.sort(function (a, b) {");optionSeries << QString(" return b.value - a.value;");//数量大小,可以固定死optionSeries << QString(" }).slice(0, %1)),").arg(cityNameCount);optionSeries << QString(" symbolSize: function (val) {");optionSeries << QString(" return val[2] / 10;");optionSeries << QString(" },");optionSeries << QString(" showEffectOn: 'render',");optionSeries << QString(" rippleEffect: {");optionSeries << QString(" brushType: 'stroke'");optionSeries << QString(" },");optionSeries << QString(" hoverAnimation: true,");optionSeries << QString(" label: {");optionSeries << QString(" normal: {");optionSeries << QString(" formatter: '{b}',");optionSeries << QString(" position: 'right',");optionSeries << QString(" show: true");optionSeries << QString(" }");optionSeries << QString(" },");optionSeries << QString(" itemStyle: {");optionSeries << QString(" normal: {");optionSeries << QString(" color: '%1',").arg(areaColor.name());optionSeries << QString(" shadowBlur: 10,");optionSeries << QString(" shadowColor: '#333'");optionSeries << QString(" }");optionSeries << QString(" },");optionSeries << QString(" zlevel: 1");QStringList option;option << optionBase.join("\r\n");option << optionGeo.join("\r\n");option << " series: [{";option << optionSeries.join("\r\n");option << " }";option << " ]";body << " option = {";body << option.join("\r\n");body << " };";return newChart(body.join("\r\n"));
}//使用代码
QStringList cityName, cityValue, cityPoint;
cityName << "上海" << "北京" << "成都" << "武汉" << "厦门" << "广州";
cityPoint << "121.48,31.22" << "116.46,39.92" << "104.06,30.67" << "114.31,30.52" << "118.1,24.46" << "113.23,23.16";
cityValue << "250" << "220" << "150" << "180" << "140" << "170";echarts->setCityName(cityName);
echarts->setCityPoint(cityPoint);
echarts->setCityValue(cityValue);
echarts->setZoom(1.0);
echarts->newChartPoint();
Qt编写地图综合应用28-闪烁点图相关推荐
- php地图路径规划,Qt编写地图综合应用21-路径规划
Qt编写地图综合应用21-路径规划 ## 一.前言 近期重新将这个地图综合应用进行大幅度的改进更新升级,包括使用示例也做了非常多的改进和调整,其中就包括路径规划功能,之前只是调用了百度地图的JS交互接 ...
- Qt编写地图综合应用3-省市区域图
一.前言 省市区域图也可以叫省市轮廓图,就是将每个省份.市区的边界区域变成轮廓展示,只是个大概的轮廓,和真是的地图基本一致,毕竟都是一个个点堆起来的,可能会有很小很小的误差,之前做大屏系统中间那个中国 ...
- Qt编写地图综合应用60-覆盖物坐标和搜索
一.前言 地图应用中有时候需要开启悬浮工具栏,用户可以直接在地图上绘制矩形.多边形.圆形.线条等,于是需要提供一个函数接口,能够获取到用户绘制的这些图形形状对应的信息.比如坐标点.圆形的中心点和半径. ...
- Qt编写地图综合应用59-经纬度坐标纠偏
一.前言 地图应用中都涉及到一个问题就是坐标纠偏的问题,这个问题的是因为根据地方规则保密性要求不允许地图厂商使用标准的GPS坐标,而是要用国家定义的偏移标准,或者在此基础上再做算法运算,所以这就出现了 ...
- Qt编写地图综合应用57-跨平台(win、linux、mac、uos、kylin等)
一.前言 跨平台着实花了不少的精力,为了从Qt4.7兼容到Qt6.2及后续版本,头发掉了不少,仅有的几根毛所剩无几,哎,可能这就是程序员的命,本人写Qt程序这么多年,比较喜欢支持多个Qt版本,尤其是钟 ...
- Qt编写地图综合应用25-echart动态交互
一.前言 之前用echart组件做过各种效果,随着各种现场应用现场项目的增多,各种需求也都慢慢增加起来,为了满足各种不同类型的需求,近期又抽空重新整理和封装了echart类,主要就是增加了不少的js函 ...
- Qt编写地图综合应用49-地图类型(街道图、卫星图)
一.前言 地图类型主要是两种,街道图和卫星图,平时我们看到的默认的都是街道图,无论是街道图还是卫星图,都是一张张图片文件组成的,级别越高,图片越是清晰,一般都会支持到19级的地图,相当于精确到20米内 ...
- Qt编写地图综合应用22-动态轨迹
一.前言 上一篇文章写道拿到路径规划的轨迹点坐标集合,并且已经可以通过调用addPolyline绘制线段的形式将轨迹点绘制,接下来就是要如何动态的绘制这些轨迹点,最简单的方法就是开个定时器挨个取出下一 ...
- Qt编写地图综合应用27-点聚合
一.前言 在地图上查询结果通常以标记点的形式展现,但是如果标记点较多,不仅会大大增加客户端的渲染时间,让客户端变得很卡,而且会让人产生密集恐惧症. 最简单的设置点聚合的方式是将传入标注点坐标集合,转换 ...
最新文章
- 由 粗 到 精 学 习 LVI-SAM: 
imageProjection模块
- CenterNet-TensorRT 3D Detection
- index 4 is out of bounds for dimension 1 with size 4
- ubuntu截图软件deepin scrot
- Spring.NET学习笔记1——控制反转(基础篇) Level 200
- thinkphp字符截取函数msubstr()
- Ubuntu16.04下安装cuda和cudnn的三种方法(亲测全部有效)
- oracle克隆方式安装,克隆Oracle实现快速安装数据库软件
- CSAPP-C1-计算机系统漫游
- 操作系统复习笔记(五)
- 2个flask服务器通信_nginx+uwsgi+flask环境部署
- python 上传文件并保存
- 小米android11账号补丁,小米CC9E MIUI11 安卓9 解账户锁 可登小米账号 永不反锁 完美ROOT 解锁包...
- 02 编程猫之小猫酷跑我设计
- UIAutomatorViewer初体验
- 不会汇报工作,还敢拼职场
- 延安市基础教育科研规划课题申请•评审书
- 重磅:Vue 官网竟然有免费的中文视频教程了
- 【Retrofit】1.02.0区别
- 浪潮受邀出席“市长论坛-深圳智慧城市国际圆桌研讨会”
热门文章
- python求和函数sum_python中numpy.sum()函数
- 将Excel导入DataGridView 中的select * from [Sheet1$]中[ ]里面表单名的动态获取
- Photoshop CS6画布缩在左上角
- Windows 2008 R2 WDS自动部署 Window 7 笔记
- android studio漫画,Android Studio 3.0 更新Gradle 插件填坑
- 邀集业界精英, 威固“威曜会”首届峰会圆满落幕
- 安踏发布中国代表团东京奥运“冠军龙服”;宇通自动驾驶巴士已投入规模化运营 | 美通社头条...
- 计算机第四次实验报告表,东南大学计算机网络第四次实验报告
- 「MOSS - 10」MOSS队:Scrum Meeting 1
- linux 开发及工作站,戴尔全新开发者移动工作站,共有 4 个版本