qml调用百度地图api实现卫星地球模式画路书轨迹

  • 总结下类型转换：
    • pro文件中加入依赖的模块
    • 引入头文件 websockettransport.h
    • main文件加入
    • qml
    • index.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.map.baidu.com/api?type=webgl&v=1.0&ak=HDMmTOItpjjwIugxR3TNuPNmRqQrBWBl"></script><script type="text/javascript" src="http://api.map.baidu.com/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>

注意

该文章仅个人学习使用，欢迎大家一起交流学习

qml调用百度地图api实现卫星地球模式画路书轨迹相关推荐

  1. android 调用百度地图规划,Android 调用百度地图API

    一.到 百度地图开发平台下载SDK 1.点击自定义下载 2.下载自己想要的功能包我这里选了三个 3.获取密钥 获取密钥之前我们要新建一个应用 填写好相关的信息 二. 新建一个项目工程 1. 把下载好的 ...

  2. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  3. C#调用百度地图API入门解决BMap未定义问题

    本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...

  4. 调用百度地图API出现 error inflating class com.baidu.mapapi.map.mapview

    调用百度地图API出现 error inflating class com.baidu.mapapi.map.mapview 问题如下 本来以为解决了,但后来重新运行了一下,又坏了,然后改成原来的样子 ...

  5. python调用百度地图API爬取西安市POI数据

    任务前提 做该项目之前,首先得有基础知识: 编程语言:python 编译工具:PyCharm 网络爬虫相关知识,xpath库,numpy,pandas等库. 任务准备: 去百度地图开放平台申请密匙:h ...

  6. c语言api获取百度地图,H5调用百度地图API获取地理位置

    //获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...

  7. java 地图api接口_Java调用百度地图API

    本实战代码将使用百度地图的接口来实现以下功能: 1.确定输入地址的坐标 2.两个坐标的距离 其他的话,还要使用百度账户申请相关的api,具体见: http://lbsyun.baidu.com/ind ...

  8. Python调用百度地图api路径查询

    通过调用百度地图api获取两个地点的距离和时间.参数详见百度地图api官方文档. # -*- coding: utf-8 -*- """ Created on Thu M ...

  9. centerandzoom 无效_Django调用百度地图api在地图上批量增加标记点

    在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区.根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置 ...

最新文章

  1. 防止html标签转义
  2. 学成在线--1.CMS接口开发
  3. 【Python3网络爬虫开发实战】1.5.3-redis-py的安装
  4. Linux (x86) Exploit 开发系列教程之十 使用 Malloc Maleficarum 的堆溢出
  5. 春天的事务管理，图解事务传播行为
  6. 词性标注-隐马尔可夫模型
  7. 解析游戏中的简单概率算法
  8. 用户行为序列推荐模型
  9. 【 OpenCV】——图像平移
  10. 【亚马逊广告策略】探索自动投放和手动投放的选择并做到广告一致性你都懂吗？
  11. 周鸿祎：35告老的大富豪
  12. P5200 Sleepy Cow Sorting（树状数组，模拟）
  13. 使用adb命令修改build.prop文件
  14. 安卓如何查找应用的安装包目录？
  15. 【重要通知】定了！全国各地的中小商户扶持政策，都在这了！
  16. 冒泡排序和纯指针的冒泡排序
  17. 关于数据库系统的学习
  18. 三阶行列式的题目_考研数学 | 线性代数中的行列式重难点分析
  19. Flink 1.10 版本之前如何生成 Watermark
  20. JAVA计算机毕业设计二手交易平台网站Mybatis+源码+数据库+lw文档+系统+调试部署

热门文章

  1. 《游戏AI开发指南(基于Lua的人工智能在游戏中的应用)》（Yanlz+Unity+SteamVR+5G+AI+VR云游戏+Lua+人机交互+沙箱+导航+决策树+影响力地图+立钻哥哥+==）
  2. 使用阿里巴巴提供的约束规范
  3. 逆向设计和正向设计的区别是什么
  4. C# 语言集成查询 LINQ（Language Integrated Query）
  5. c#学习笔记（1）GridView问题
  6. python输出偶数_Python 判断奇数偶数的方法
  7. 关联子查询实现窗口函数
  8. 几个在线查看函数图像的网站
  9. 语音韵律及其神经基础
  10. 分享7款颜色的CSS表格样式美化网页表格用户体验