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);

三、完成以上代码的调试，就可以实际测试了。这里不方便上传视频，搜索微信视频号 懂一点技术的老王 浏览完成视频。

抽空完善下推到Github上，有兴趣的朋友们可以看看。欢迎关注和交流