qml调用百度地图api实现卫星地球模式画路书轨迹
总结下类型转换：pro文件中加入依赖的模块引入头文件 websockettransport.hmain文件加入qmlindex.html注意总结下类型转换：
pro文件中加入依赖的模块
这里我对工作中matlab的程序需要实现的功能进行讲解：
QT += qml quick webview webchannel websockets webengine
引入头文件 websockettransport.h
#ifndef WEBSOCKETTRANSPORT_H#define WEBSOCKETTRANSPORT_H#include <QWebChannelAbstractTransport>#include <QJsonDocument>#include <QJsonObject>#include <QDebug>class WebSocketTransport : public QWebChannelAbstractTransport{Q_OBJECTpublic:Q_INVOKABLE void sendMessage(const QJsonObject &message) override{QJsonDocument doc(message);emit messageChanged(QString::fromUtf8(doc.toJson(QJsonDocument::Compact)));}Q_INVOKABLE void textMessageReceive(const QString &messageData){QJsonParseError error;QJsonDocument message = QJsonDocument::fromJson(messageData.toUtf8(), &error);if (error.error){qWarning() << "Failed to parse text message as JSON object:" << messageData<< "Error is:" << error.errorString();return;} else if (!message.isObject()){qWarning() << "Received JSON message that is not an object: " << messageData;return;}emit messageReceived(message.object(), this);}signals:void messageChanged(const QString & message);};#endif // WEBSOCKETTRANSPORT_H
main文件加入
#include <QQmlApplicationEngine>#include <QQuickWindow>#include <QGuiApplication>#include <QtWebView>#include <QWebChannel>#include <QWebSocketServer>#include "./include/websockettransport.h"int main(int argc, char *argv[]){// QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);// QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);QApplication app(argc, argv);// don't forget about thisQtWebView::initialize();qmlRegisterType<WebSocketTransport>("io.decovar.WebSocketTransport", 1, 0, "WebSocketTransport");QSurfaceFormat format;format.setDepthBufferSize(24);format.setStencilBufferSize(8);format.setVersion(3, 2);format.setProfile(QSurfaceFormat::CoreProfile);QSurfaceFormat::setDefaultFormat(format);QQmlApplicationEngine engine;engine.load(QUrl(QLatin1String("qrc:/main.qml")));if (engine.rootObjects().isEmpty()){QMessageBox::warning(NULL, "Warning!", "qml加载异常!");return -1;}return app.exec();}
qml
QtObject {id: someObjectWebChannel.id: "backend"property string someProperty: "qml data"signal someSignal(var wxName, var dataLen, var jd, var wd);signal beginPlay(var order);function changeText(newText) {return "New text length: ";}}WebSocketTransport {id: transport}WebSocketServer {id: serverlisten: trueport: 55222onClientConnected: {if(webSocket.status === WebSocket.Open) {channel.connectTo(transport)webSocket.onTextMessageReceived.connect(transport.textMessageReceive)transport.onMessageChanged.connect(webSocket.sendTextMessage)}}onErrorStringChanged: {console.log(qsTr("Server error: %1").arg(errorString));}Component.onCompleted: {console.log(server.url + "已连接");}}WebView {id: webViewanchors.fill: parentanchors.margins: 5url: "qrc:/map/index.html"onLoadingChanged: {if (loadRequest.errorString){console.error(loadRequest.errorString); }}}WebChannel {id: channelregisteredObjects: [someObject]}//给前端wx图 这是一个cpp给qml发的信号onShowWx: {someObject.someSignal(wxName, dataLen, jd, wd);}
需要注意的是不能将webView画在如Rectangle类这种控件的里面，否则地图会出现跑点，3D图出不来等一系列问题，需要将其单独放在Page或者底层继承自widget类的控件中才行
index.html
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="http://api./api?type=webgl&v=1.0&ak=HDMmTOItpjjwIugxR3TNuPNmRqQrBWBl"></script><script type="text/javascript" src="http://api./library/LuShu/gl/src/LuShu_min.js"></script><script type="text/javascript" src="qrc:/js/qwebchannel.js"></script><title>地球模式</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var img = document.createElement("img");img.src = "../pic/卫星.png";// 百度地图API功能var map = new BMapGL.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.setMapType(BMAP_EARTH_MAP);// 设置地图类型为地球模式map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件var wxMbData = {};var polylineList = {};// here will be our QtObject from QML sidevar backend;var someProperty;function startLushu(polyline) {var fly = 'data:image/png;base64,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';lushu = new BMapGLLib.LuShu(map, polyline.getPath(), {geodesic: true,autoCenter: true,icon: new BMapGL.Icon(fly, new BMapGL.Size(48, 48), {anchor: new BMapGL.Size(24, 24) }),speed: 1000000,enableRotation: true});setTimeout('lushu.start()', 4000);}window.onload = function(){var socket = new WebSocket("ws://127.0.0.1:55222");socket.onopen = function(){new QWebChannel(socket, function(channel) {backend = channel.objects.backend;someProperty = backend.someProperty;backend.beginPlay.connect(function(beginStr){alert("begin play");});backend.someSignal.connect(function(wxName, dataLen, jd, wd) {var j=0;var maxLen = 0;for(var i=0;i<wxName.length;i++){var path = [];maxLen = maxLen + dataLen[i];for(j;j<maxLen;j++){path.push(new BMapGL.Point(jd[j], wd[j]));}wxMbData[wxName[i]] = path;var polyline = new BMapGL.Polyline(path, {clip: false,// geodesic: true,strokeWeight: 1});polylineList[wxName[i]] = polyline;map.addOverlay(polyline);startLushu(polyline);}this.map.clearOverlay();});});};socket.onerror = function(evt){alert("on error");}socket.onmessage = function (evt){var received_msg = evt.data;alert("Message is received: " + received_msg);};socket.onclose = function(evt){alert("Connection is closed: " + evt.code + " - " + evt.reason);};}</script>
注意
该文章仅个人学习使用，欢迎大家一起交流学习
