锐客网

X-MagicBox-820的luatOS之路连载系列6

继上次用Qt实现了显示地图和MQTT通信之后(X-MagicBox-820的luatOS之路连载系列5),说是要研究下地图的开放接口,也看了标记点和线的方法(地图上自定义标记点和轨迹线的实现)。这次就来调试剩下的部分:GPS数据在地图上的呈现。
下图就是测试的结果
X-MagicBox-820的luatOS之路连载系列6
文章图片



这个轨迹的测试还是让家里小闺女帮助完成的
X-MagicBox-820的luatOS之路连载系列6
文章图片


结合之前的基础,实现图上的轨迹标记主要两个技术点。一是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 = https://www.it610.com/article/[]; 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);

三、完成以上代码的调试,就可以实际测试了。这里不方便上传视频,搜索微信视频号 懂一点技术的老王 浏览完成视频。
抽空完善下推到Github上,有兴趣的朋友们可以看看。欢迎关注和交流 【X-MagicBox-820的luatOS之路连载系列6】