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

继上次用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 = 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】