【合宙Air820开发板试用体验】定位记录和行程展示的技术实现6

2021-12-5 13:07:48

QQ录屏20211205105050

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

这个轨迹的测试还是让家里小闺女帮助完成的

结合之前的基础，实现图上的轨迹标记主要两个技术点。一是Qt的WebEngineView模块实现C++层面与HTML层面的通信，二是JS数据的解析。
一、Qt部分的实现：
（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在小区里转了一圈，老王在电脑的Qt客户端录制了整个过程。到这里已经实现了试用的计划，后面的其他功能的使用也会抽空分享出来。

本次的小制作老王会抽空完善下代码推到Github上，有兴趣的朋友们可以看看。公众号：懂一点技术的老王欢迎关注和交流。