扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt编写地图迁徙图的实现示例
  • 736

0
分享到

Qt编写地图迁徙图的实现示例

2024-04-02 19:04:59 736人浏览 安东尼
摘要

目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 在很多WEB系统中，尤其是大屏系统中，经常可以看到类似于飞机迁徙图的效果，这个在echart中也是最常用的一个效果

一、前言

在很多WEB系统中，尤其是大屏系统中，经常可以看到类似于飞机迁徙图的效果，这个在echart中也是最常用的一个效果，迁徙图既可以是一个飞机也可以是其他形状，然后有一条动态的移动轨迹来表示流向，一般都是多个点流向一个点，也可以做成一个点流向多个点，是个多对多的关系，常用来表示人口迁徙、动物迁徙、黑客攻击、病毒攻击、数据流向、产品流向等。

迁徙图和上一篇的闪烁点图类似，也需要提供三个基本要素：城市名称集合、城市经纬度集合、中心点城市经纬度，至于城市点的颜色和迁徙流向箭头的颜色，都可以单独设置，echart对每个类对象都竭尽全力的提供了各种各样的属性，只要你可以想象得到的都有，估计也是开发人员摸爬滚打从实际需求中不断完善和提炼出来的，比如颜色、位置、动作、动画、字体、大小、形状、效果、类型等，这点还是非常佩服相关的开发人员，能够不断的完善升级到今天，确实相当完美。

二、功能特点

  • 同时支持闪烁点图、迁徙图、区域地图、仪表盘等。
  • 可以设置标题、提示信息、背景颜色、文字颜色、线条颜色、区域颜色等各种颜色。
  • 可设置城市的名称、值、经纬度 集合。
  • 可设置地图的放大倍数、是否允许鼠标滚轮缩放。
  • 内置世界地图、全国地图、省份地图、地区地图，可以精确到县，所有地图全部离线使用。
  • 内置了各省市JSON数据文件转js文件功能，如有数据更新自行转换即可，支持单个文件转换和一键转换所有文件。
  • 内置了从json文件或者js文件获取该区域的所有名称和经纬度信息集合的功能，可以通过该方法获取到信息用来显示。
  • 依赖浏览器组件显示地图，提供的demo支持webkit、webengine、ie 三种方式加载网页。
  • 拓展性极强，可以依葫芦画瓢自行增加各种精美的echarts组件，做出牛逼的效果。
  • 内置的仪表盘组件提供交互功能，demo演示中包含了对应的代码。
  • 函数接口友好和统一，使用简单方便，就一个类。
  • 支持任意Qt版本、任意系统、任意编译器。

三、体验地址

体验地址：https://pan.baidu.com/s/1Ie1xGLv7tSL-9vfsv28w1Q 提取码: wf4f   文件名：bin_map.zip
国内站点：Https://gitee.com/feiyangqingyun
国际站点：https://GitHub.com/feiyangqingyun

四、效果图

在这里插入图片描述

五、相关代码


//核心代码
QString Echarts::newChartMove(const QString &centerCity)
{
	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(","));

	//找到中心城市的经纬度,默认值北京
	QString toCity = "北京";
	QString toPoint = "116.46,39.92";
	int index = cityName.indexOf(centerCity);
	if (index >= 0) {
		toCity = centerCity;
		toPoint = cityPoint.at(index);
	}

	//转换数据
	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 dataItem = data[i];");
	datas << QString("    var fromCoord = geoCoordMap[dataItem[0].name];");
	datas << QString("    var toCoord = [%1];").arg(toPoint);
	datas << QString("    if (fromCoord && toCoord) {");
	datas << QString("      res.push([{");
	datas << QString("        coord: fromCoord,");
	datas << QString("          value: dataItem[0].value");
	datas << QString("        }, {");
	datas << QString("          coord: toCoord,");
	datas << QString("       }]);");
	datas << QString("    }");
	datas << QString("  }");
	datas << QString("  return res;");
	datas << QString("};");
	body << "  " + datas.join("\r\n  ");
	body << "";

	QStringList optionSeries;
	optionSeries << QString("  var series = [];");
	optionSeries << QString("  [['%1', data]].forEach(function(item, i) {").arg(toCity);
	optionSeries << QString("    console.log(item);");
	optionSeries << QString("      series.push({");
	optionSeries << QString("        type: 'lines', zlevel: 2,");
	optionSeries << QString("        effect: {show: true, period: 4, trailLength: 0.02, symbol: 'arrow', symbolSize: 5,},");
	optionSeries << QString("        lineStyle: {nORMal: {width: 1, opacity: 1, curveness: .3, color: '%1'}},").arg(lineColor.name());
	optionSeries << QString("        data: convertData(item[1])}, {");
	optionSeries << QString("        type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2,");
	optionSeries << QString("        rippleEffect: {period: 4, brushType: 'stroke', scale: 4},");
	optionSeries << QString("        label: {");
	optionSeries << QString("          normal: {");
	optionSeries << QString("             show: true, position: 'right', offset: [5, 0], fontSize: 15,");
	optionSeries << QString("             formatter: function(params) {return params.data.name;}");
	optionSeries << QString("          },");
	optionSeries << QString("          emphasis: {show: true}");
	optionSeries << QString("        },");
	optionSeries << QString("        symbol: 'circle',");
	optionSeries << QString("        symbolSize: function(val) {");
	optionSeries << QString("          return 6 + val[2] * 5;");
	optionSeries << QString("        },");
	optionSeries << QString("        itemStyle: {normal: {show: false, color: '%1'}},").arg(areaColor.name());
	optionSeries << QString("          data: item[1].map(function(dataItem) {");
	optionSeries << QString("            return {name: dataItem[0].name, value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])};");
	optionSeries << QString("          }),},");

	//被攻击点,可自行调整对应的值改变大小速度等
	optionSeries << QString("        {");
	optionSeries << QString("            type: 'scatter', coordinateSystem: 'geo', zlevel: 2,");
	optionSeries << QString("            rippleEffect: {period: 4, brushType: 'stroke', scale: 4},");
	optionSeries << QString("            label: {");
	optionSeries << QString("                normal: {");
	optionSeries << QString("                    show: true, position: 'right',");
	optionSeries << QString("                    color: '#0f0', formatter: '{b}',");
	optionSeries << QString("                    textStyle: {color: '#0f0'}");
	optionSeries << QString("                },");
	optionSeries << QString("                emphasis: {show: true, color: '#f60'}");
	optionSeries << QString("            },");
	optionSeries << QString("        }");
	optionSeries << QString("      );");
	optionSeries << QString("    }");
	optionSeries << QString("  );");
	body << optionSeries.join("\r\n") << "";

	QStringList optionBase = getOptionBase();
	QStringList optionGeo = getOptionGeo();

	QString option = QString("%1\r\n%2\r\n    series: series").arg(optionBase.join("\r\n")).arg(optionGeo.join("\r\n"));
	body << "  option = {";
	body << option;
	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 << "1" << "0" << "0" << "0" << "0" << "0";

echarts->setCityName(cityName);
echarts->setCityPoint(cityPoint);
echarts->setCityValue(cityValue);
echarts->setZoom(1.0);
echarts->newChartMove("上海");

到此这篇关于Qt编写地图迁徙图的实现示例的文章就介绍到这了,更多相关Qt 地图迁徙图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Qt编写地图迁徙图的实现示例

本文链接: https://lsjlt.com/news/160335.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Qt编写地图迁徙图的实现示例
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 在很多web系统中，尤其是大屏系统中，经常可以看到类似于飞机迁徙图的效果，这个在echart中也是最常用的一个效果...
    99+
    2024-04-02
  • Qt编写地图实现闪烁点图的示例代码
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 Qt作为一个超大型的一站式GUI超市开发集成环境，不仅集成了大量的可视化UI组件，还提供了网络库、数据库操作、文件...
    99+
    2024-04-02
  • QT编写地图实现在线轮廓图的示例代码
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码 一、前言 轮廓图也叫行政区划，这里的轮廓图是指百度地图的区域轮廓图，不是之前文章中提到的echart专用的轮廓图，百度地图...
    99+
    2024-04-02
  • QT编写地图实现离线轮廓图的示例代码
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码 一、前言 离线轮廓图使用起来，就没有在线轮廓图方便了，在线的可以直接传入名称拿到，离线的只能自己绘制了，一般需要用区域轮廓...
    99+
    2024-04-02
  • Qt编写地图实现省市区域图的示例代码
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 省市区域图也可以叫省市轮廓图，就是将每个省份、市区的边界区域变成轮廓展示，只是个大概的轮廓，和真是的地图基本一致...
    99+
    2024-04-02
  • QT编写地图实现设备点位的示例代码
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 在学习JS语法的时候发现其实程序都大同小异，正所谓一通百通，熟悉各大概的语法以后基本都可以上手，和C++最大的不同...
    99+
    2024-04-02
  • QT编写地图实现设备点位的示例代码怎么写
    本篇文章为大家展示了QT编写地图实现设备点位的示例代码怎么写，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。一、前言在学习JS语法的时候发现其实程序都大同小异，正所谓一通百通，熟悉各大概的语法以后基本...
    99+
    2023-06-26
  • Qt编写地图实现动态点位标注的示例代码
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 动态点位标注是定制的一个功能模块，提供直接地图上选点设置标记点，点位信息用结构体存储，其中包括了经度、纬度、速度、...
    99+
    2024-04-02
  • Qt如何编写地图实现省市区域图
    这篇文章主要介绍了Qt如何编写地图实现省市区域图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、前言省市区域图也可以叫省市轮廓图，就是将每个省份、市区的边界区域变成轮廓展示...
    99+
    2023-06-22
  • QT编写地图如何实现在线轮廓图
    这篇文章给大家分享的是有关QT编写地图如何实现在线轮廓图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、前言轮廓图也叫行政区划，这里的轮廓图是指百度地图的区域轮廓图，不是之前文章中提到的echart专用的轮廓图...
    99+
    2023-06-22
  • QT编写地图如何实现离线轮廓图
    这篇文章主要为大家展示了“QT编写地图如何实现离线轮廓图”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“QT编写地图如何实现离线轮廓图”这篇文章吧。一、前言离线轮廓图使用起来，就没有在线轮廓图方便...
    99+
    2023-06-22
  • Qt编写地图之实现跨平台功能
    目录一、前言二、功能特点1 省市区域地图封装类功能特点2 百度地图封装类功能特点3 离线地图下载类功能特点4 省市轮廓下载类功能特点三、体验地址四、效果图五、相关代码一、前言 跨平台...
    99+
    2024-04-02
  • QT编写地图实现获取区域边界
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 区域边界也是一些坐标点集合，而且不同的行政区划得到的区域边界点数组集合个数不同，觉得部分都是一个集合，少部分有一些...
    99+
    2024-04-02
  • Qt编写地图实现海量点位标注
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 海量点位标注的出现，是为了解决普通设备点超过几百个性能极速降低的问题，普通的marker标注由于采用的是对象的形式...
    99+
    2024-04-02
  • Qt地图自适应拉伸的实现示例
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 用过echart的人都会遇到一个问题，就算是代码中写了window.onresize = echart.resi...
    99+
    2024-04-02
  • Qt编写地图实现实时动态轨迹效果
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 实时动态轨迹经历过很多个版本的迭代，此功能最初是一个客户定制的，主要是需要在地图上动态显示GPS的运动轨迹，有个应...
    99+
    2024-04-02
  • Qt编写地图之实现经纬度坐标纠偏
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 地图应用中都涉及到一个问题就是坐标纠偏的问题，这个问题的是因为根据地方规则保密性要求不允许地图厂商使用标准的GPS...
    99+
    2024-04-02
  • Qt编写地图怎么实现海量点位标注
    这篇文章将为大家详细讲解有关Qt编写地图怎么实现海量点位标注，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。一、前言海量点位标注的出现，是为了解决普通设备点超过几百个性能极速降低的问题，普通的...
    99+
    2023-06-29
  • Qt编写提示进度条的实现示例
    目录一、前言二、实现的功能三、效果图四、头文件代码五、核心代码六、控件介绍一、前言 我们在很多的安装包中，在安装过程中，经常可以在底部看到一个漂亮的进度条，上面悬浮着显示对应的进度...
    99+
    2024-04-02
  • Qt编写地图之实现覆盖物坐标和搜索
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 地图应用中有时候需要开启悬浮工具栏，用户可以直接在地图上绘制矩形、多边形、圆形、线条等，于是需要提供一个函数接口，...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作