X-MagicBox-820的luatOS之路连载系列6
继上次用Qt实现了显示地图和MQTT通信之后(X-MagicBox-820的luatOS之路连载系列5),说是要研究下地图的开放接口,也看了标记点和线的方法(地图上自定义标记点和轨迹线的实现)。这次就来调试剩下的部分:GPS数据在地图上的呈现。
下图就是测试的结果
这个轨迹的测试还是让家里小闺女帮助完成的
结合之前的基础,实现图上的轨迹标记主要两个技术点。一是Qt的WebEngineView模块实现C++层面与HTML层面的通信,二是JS数据的解析。
(1)增加派生类WebClass,用来在JS中访问。
class WebClass : public QObject
{
Q_OBJECT
Q_PROPERTY(QString content MEMBER m_content NOTIFY contentChanged) //该属性可由页面访问 public:
WebClass(){};
QString getContent(){return m_content;}
signals:
void contentChanged(QString nc); private:
QString m_content;
};
(2)WebChannel的实例化,注册JS的访问对象。
webch = new QWebChannel(this);
webobj = new WebClass();
webch->registerObject("webobj", webobj);
ui->widget->page()->setWebChannel(webch);
(3)在MQTT消息槽内更新注册类的变量内容。
connect(m_client, &QMqttClient::messageReceived, this, [this](const QByteArray &message, const QMqttTopicName &topic) {
const QString content = message;
//qDebug() << content;
webobj->setProperty("content", message);
});
二、JavaScript代码的实现:
(1)获取Qt中的对象的值
//这里的webChannel是全局的变量,可以在其它位置访问
var webChannel = new QWebChannel(qt.webChannelTransport,
function(channel){
var webobj = channel.objects.webobj; webobj.contentChanged.connect(updateattribute);
});
(2)解析更新的变量,就是上面updateattribute的函数体实现,同时地图的标记过程也在该函数内实现。
var updateattribute=function(text)
{
//截取所需数据
var str = [];
str = text.split(',');
pointx = str[0].slice(1);
pointy = str[1].slice(1);
//根据第一个点确定位置,地图的初始显示
if(isPoint){
isPoint = false;
//初始位置
var pinit = new BMapGL.Point(pointx, pointy);
map.centerAndZoom(pinit, 15);
}else{ }
//gps点集
var data = [];
data[0] = pointx;
data[1] = pointy;
point.push(data); var rPoint = new BMapGL.Point(point[point.length-1][0],point[point.length-1][1]);
bPoints.push(rPoint);
//更新标记点
marker = new BMapGL.Marker(rPoint); // 创建点
map.addOverlay(marker); //更新连线
if(point.length > 1){
var polyline = new BMapGL.Polyline([
new BMapGL.Point(point[point.length-2][0],point[point.length-2][1]),
new BMapGL.Point(point[point.length-1][0],point[point.length-1][1]),
], {strokeColor:"red", strokeWeight:5, strokeOpacity:0.5}); //创建折线
map.addOverlay(polyline);
} setZoom(bPoints); }
(3)为了提升观察体验,添加自动缩放显示的处理。
// 根据点的数组自动调整缩放级别
function setZoom(bPoints) {
var view = map.getViewport(eval(bPoints));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint, mapZoom);
}
map.addControl(new BMapGL.MapTypeControl());
map.enableScrollWheelZoom(true);
三、完成以上代码的调试,就可以实际测试了。这里不方便上传视频,搜索微信视频号 懂一点技术的老王 浏览完成视频。
X-MagicBox-820的luatOS之路连载系列6的更多相关文章
- X-MagicBox-820的luatOS之路连载系列4
上次说到定位成功后,显示的数据准确性问题.专门查询了下我所在地区的经纬度信息. MagicBox的显示数据是这样的: 网络上查到的经纬度数据是这样的: 可以看出定位精度还可以,毕竟我这个查询的数据没有 ...
- X-MagicBox-820的luatOS之路连载系列2
这块MagicBox小巧但外设丰富,盖板上的小液晶屏竟有240*240的分辨率.点亮后若是用最小字体,真有看瞎老王的不瞎之眼之势. 这种屏在某宝也是比较多的,大概就是长这样子: 我们这个820的盖板上 ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路] 设计模式系列课程 - jQuery的extend插件机制
这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
随机推荐
- 高斯消元de小板几
感觉就是模拟解方程,还比手动解方程笨一些.... 但是大数据的话,他毕竟比我解得快多了.... 1 inline int Gauss(int n){ 2 int cnt=1;//真实到达的行列式行数 ...
- vs2017和Qt5的字符编码问题
默认vs2017的源文件字符编码是gbk的格式,Qt5的内部字符编码为utf8的格式,Qt5又去掉了设置字符串的接口,这样在源文件中使用了字符串之后,就会出现乱码问题,对原有代码逐个修改字符串是不可能 ...
- C++ Boost signal2信号/插槽
#include "stdafx.h" #include "boost/signals2.hpp" #include "boost/bind.hpp& ...
- iPhone SE切换颜色特效
Apple 网站的特效, iPhone SE 共有黑.白.红三种颜色,在卷动页面的时候会逐步替换,看起来效果非常时尚,在此供上代码学习. <!DOCTYPE html> <html& ...
- pycharm的基本使用 、 Python的注释语法,变量,常量,垃圾回收机制,数据类型
1.文件路径要注意 我把文件放在了D盘,如下图:你们可以根据自身情况设置 2.python环境要选择本地下载好的 如下图: 点击本机存在的环境,如果提示NO interpr,就点击第二步 如果还是没有 ...
- Centos7上安装Ubuntu容器
1.再次之前我们要先装好docker,在上一篇我已经给出了教程,没有安装好的快去看看吧! 2.这里我们使用的是linux系统,所有在线安装是最简便的方法了.我们可以从国内拉取dockerhub镜像,这 ...
- k8s入坑之路(2)kubernetes架构详解
每个微服务通过 Docker 进行发布,随着业务的发展,系统中遍布着各种各样的容器.于是,容器的资源调度,部署运行,扩容缩容就是我们要面临的问题. 基于 Kubernetes 作为容器集群的管理平 ...
- C++ 变量声明 定义 作用域 链接性总结
变量定义 变量的定义用于为变量分配存储空间,还可以为变量指定初始值.在一个程序中,变量有且仅有一个定义. 变量声明 用于向程序表明变量的类型和名字.程序中变量可以声明多次,但只能定义一次. 变量的类型 ...
- robot framework 导入资源
创建资源后添加关键字 创建资源文件用于存放关键字,项目下的所有套件都可以引用. 1.创建资源 测试项目->new resource->输入资源名称->点击"确认" ...
- C++ substr 的两个用法
substr是C++语言函数,主要功能是复制子字符串,要求从指定位置开始,并具有指定的长度. basic_string substr(size_type _Off = 0,size_type _C ...