• 1501阅读
  • 2回复

Qt编写地图综合应用58-兼容多浏览器内核 [复制链接]

上一主题 下一主题
离线liudianwu
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2022-02-15
## 一、前言
miniblink是一个追求极致小巧的浏览器内核项目,全世界第三大流行的浏览器内核控件。其基于chromium最新版内核,去除了chromium所有多余的部件,只保留最基本的排版引擎blink。miniblink保持了10M左右的极简大小,是所有同类产品最小的体积,同时支持windows xp、npapi。miniblink的作者非常牛逼,QQ昵称叫扫地僧,犹如天龙八部中的扫地僧一般,极其隐秘又武功极高,精通各种绝技,确实相当的屌。

用Qt做项目过程中,遇到需要用到浏览器控件的项目,可能都会绕不开一个问题,那就是从Qt5.6版本开始mingw编译器的Qt构建套件,不再提供浏览器控件了,之前还可以用webkit控件,这下很多项目要么选择5.6以下版本,要么选择msvc的构建套件,而且大部分的msvc构建套件还不自带浏览器控件,也需要自己编译,只有原配的构建套件比如Qt5.9+VS2015、Qt5.12+VS2017这种搭配才可能有浏览器控件,不然就算你勾选了浏览器控件也不会安装,这样就使得很多依赖浏览器控件的项目比较被动,于是必须寻找一个轻量级的浏览器控件来替代,比如cef、miniblink,个人更倾向于miniblink,用法极其简单,依赖极其精简就一个dll,在linux和mac系统上本来qt就一直会有浏览器控件,所以也就不涉及到跨平台的问题,所以miniblink暂支持windows的缺点也就不算缺点了。

qt+miniblink用法步骤:
- 第一步:调用wkeSetWkeDllPath函数加载dll文件路径,一个项目只需要执行一次。
- 第二步:调用wkeInitialize初始化动态库,一个项目只需要执行一次。
- 第三步:调用wkeCreateWebWindow创建一个浏览器控件,传入句柄。
- 第四步:调用wkeOnLoadingFinish注册回调加载完成信号,有需要才注册。
- 第五步:调用wkeJsBindFunction注册回调接收数据的方法,一定要放在这里在网页加载前执行。
- 第六步:调用wkeLoadURL加载网址、wkeLoadFile加载网页文件、wkeLoadHtmlWithBaseUrl加载网页内容。
- 第七步:调用wkeRunJS执行js函数,超级简单。
- 第八步:调用wkeFinalize释放资源,只要执行一次,在整个项目结束的时候。

## 二、功能特点
### 1 省市区域地图封装类功能特点
1. 同时支持闪烁点图、迁徙图、区域地图、世界地图、仪表盘等。
2. 可以设置标题、提示信息、背景颜色、文字颜色、线条颜色、区域颜色等各种颜色。
3. 可设置城市的名称、值、经纬度 集合。
4. 可设置地图的放大倍数、是否允许鼠标滚轮缩放。
5. 内置世界地图、全国地图、省份地图、地区地图,可以精确到县,所有地图全部离线使用。
6. 内置了各省市json数据文件转js文件功能,如有数据更新自行转换即可,支持单个文件转换和一键转换所有文件。
7. 内置了从json文件或者js文件获取该区域的所有名称和经纬度信息集合的功能,可以通过该方法获取到信息用来显示
8. 依赖浏览器组件显示地图,提供的demo支持webkit/webengine/miniblink/ie 多种方式加载网页。
9. 采用miniblink浏览器内核打通了Qt5.6及后续版本+mingw编译器缺少浏览器模块的遗憾,使得整个项目支持所有Qt版本,亲测4.7到6.2等任意版本。
10. 闪烁点迁徙图等设置的点支持单独设置颜色。
11. 提供接口直接获取点击的点相关信息,方便程序联动处理。
12. 拓展性极强,可以依葫芦画瓢自行增加各种精美的echarts组件,做出牛逼的效果。
13. 内置的仪表盘组件提供交互功能,demo演示中包含了对应的代码。
14. 函数接口友好和统一,使用简单方便,就一个类。
15. 支持任意Qt版本、任意系统、任意编译器。

### 2 百度地图封装类功能特点
1. 同时支持在线地图和离线地图两种模式。
2. 同时支持webkit内核、webengine内核、miniblink内核、IE内核。
3. 支持设置多个标注点,信息包括名称、地址、经纬度。
4. 可设置地图是否可单击、拖动、鼠标滚轮缩放。
5. 可设置协议版本、秘钥、主题样式、中心坐标、中心城市、地理编码位置等。
6. 可设置地图缩放比例和级别,缩略图、比例尺、路况信息等控件的可见。
7. 支持地图交互,比如鼠标按下获取对应位置的经纬度。
8. 支持查询路线,可设置起点位置、终点位置、路线模式、路线方式、路线方案(最少时间、最少换乘、最少步行、不乘地铁、最短距离、避开高速)。
9. 可显示点线面工具,可直接在地图上划线、点、矩形、圆形等。
10. 可设置行政区划,指定某个城市区域绘制图层,在线地图自动输出行政区划边界点集合到js文件给离线地图使用。
11. 可静态或者动态添加多个覆盖物。支持点、折线、多边形、矩形、圆形、弧线、点聚合等。
12. 提供函数接口处理经纬度解析成地址和地址解析成经纬度坐标。
13. 提供的demo直接可以单独选点执行对应的处理比如路线查询。
14. 可以拿到路线查询到的点坐标信息集合,比如用于机器人坐标导航等。
15. 封装了丰富的函数比如删除指定点和所有点,删除指定覆盖物和所有覆盖物等。
16. 标注点弹框信息可以自定义内容,标准html格式。
17. 标注点单击事件可选 0-不处理 1-自己弹框 2-发送信号。
18. 标注点可设置动画效果 0-不处理 1-跳动 2-坠落
19. 标注点可设置本地图片文件等。
20. 函数接口友好和统一,使用简单方便,就一个类。
21. 支持js动态交互添加点、删除点、清空点、重置点,不需要刷新页面。
22. 支持任意Qt版本、任意系统、任意编译器。

### 3 离线地图下载类功能特点
1. 多线程同步下载多级别瓦片地图,不卡界面
2. 内置多个离线地图下载请求地址,自动随机选择一个发送请求。
3. 下载地图类型同时支持街道图和卫星图。
4. 自动计算可视区域或者行政区域的下载瓦片数量。
5. 下载的级别可以自定义范围和选择。
6. 每个瓦片下载完成都发送信号通知,参数包括下载用时。
7. 可设置下载最大超时时间,超过了则丢弃跳到下一个下载任务。
8. 实时显示下载进度,以及当前级别已经下载的瓦片数和总瓦片数。
9. 下载过程中可以停止下载,下载完成自动统计总用时。
10. 内置经纬度和屏幕坐标互相转换函数。
11. 目前支持百度地图,其他地图比如谷歌地图、腾讯地图、高德地图可以定制。
12. 函数接口友好和统一,使用简单方便,就一个类。
13. 支持任意Qt版本、任意系统、任意编译器。

### 4 省市轮廓下载类功能特点
1. 定时器排队下载省市轮廓图点坐标集合存储到JS文件。
2. 支持一个行政区域多个不规则区域下载。
3. 自动计算行政区域的下载轮廓数量。
4. 可精确选择省份、市区、县城,也可直接输入行政区域的名称。
5. 可以设置下载间隔、随时开始下载和停止下载。
6. 提供编辑边界功能,可以直接在地图上编辑好不规则区域的点集合,然后获取边界点集合数据,这个可以用来自己绘制区域拿到数据,比如某个乡镇甚至某个小区的行政区域数据,很牛逼。

## 三、体验地址
1. 体验地址:[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取码:o05q  文件名:bin_map.zip
2. 国内站点:[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)
3. 国际站点:[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)
4. 个人主页:[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)
5. 知乎主页:[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)

## 四、效果图




## 五、相关代码
```cpp
#include "miniblink.h"
#include "qapplication.h"
#include "qmessagebox.h"
#include "qdatetime.h"
#include "qfile.h"
#include "qvariant.h"
#include "qdebug.h"

#pragma execution_character_set("utf-8")
#define TIMEMS qPrintable(QTime::currentTime().toString("hh:mm:ss zzz"))
static void onLoadingFinish(wkeWebView, void *param, const wkeString, wkeLoadingResult result, const wkeString)
{
    //qDebug() << TIMEMS << "onLoadingFinish" << result;
    //在注册函数的地方就已经传入了类指针
    miniblink *widget = (miniblink *)param;
    //0 = WKE_LOADING_SUCCEEDED, 1 = WKE_LOADING_FAILED, 2 = WKE_LOADING_CANCELED
    widget->loadFinish(result == 0);
}

static jsValue objName_receiveData(jsExecState es, void *param)
{
    if (0 == jsArgCount(es)) {
        return jsUndefined();
    }

    //挨个取出参数,设定的通用方法,只有两个参数
    jsValue arg0 = jsArg(es, 0);
    jsValue arg1 = jsArg(es, 1);
    if (!jsIsString(arg0)) {
        return jsUndefined();
    }

    //可以拿到具体的webview对象用于区别分析
    //jsGetWebView(es);

    //转换对应的数据,还有很多其他参数判断具体参见 wke.h
    QString type = QString::fromStdString(jsToTempString(es, arg0));
    QVariant data;
    if (jsIsNumber(arg1)) {
        data = jsToInt(es, arg1);
    } else if (jsIsBoolean(arg1)) {
        data = jsToBoolean(es, arg1);
    } else if (jsIsString(arg1)) {
        data = QString::fromStdString(jsToTempString(es, arg1));
    } else if (jsIsArray(arg1)) {
        //下面的转换需要根据实际项目应用进行处理
        data = QString::fromStdString(jsToTempString(es, arg1));
        if (type == "boundary") {

        } else if (type == "routepoints") {

        }
    }

    //在注册函数的地方就已经传入了类指针
    miniblink *widget = (miniblink *)param;
    widget->receiveData(type, data);
    return jsUndefined();
}

miniblink::miniblink(QWidget *parent) : QWidget(parent)
{
    //第一步先初始化动态库
    init();
    //第二步初始化浏览器控件
    //创建一个浏览器控件,放入句柄
    webView = wkeCreateWebWindow(WKE_WINDOW_TYPE_CONTROL, (HWND)this->winId(), 0, 0, this->width(), this->height());
    //关联完成信号
    wkeOnLoadingFinish(webView, onLoadingFinish, this);
    //设置浏览器控件可见
    wkeShowWindow(webView, true);
    //设置右键菜单是否可见
    wkeSetContextMenuEnabled(webView, false);
    //设置是否允许触屏
    wkeSetTouchEnabled(webView, false);
    //还有更多参数说明参见 https://miniblink.net/views/doc/APIDocument/API/index.html
    //wkeJsBindFunction("objName_receiveData", objName_receiveData, this, 2);
}

void miniblink::init()
{
    //全局只需要初始化一次
    static bool isInit = false;
    if (!isInit) {
        isInit = true;
        //不同的构建套件位数加载不同的动态库
#ifdef Q_OS_WIN64
        QString flag = "64";
        QString file = qApp->applicationDirPath() + "/miniblink_64.dll";
#else
        QString flag = "32";
        QString file = qApp->applicationDirPath() + "/miniblink.dll";
#endif
        //如果文件不存在则提示
        if (!QFile(file).exists()) {
            QMessageBox::critical(0, "错误", file + "\n文件不存在请先拷贝!");
            return;
        }

        const wchar_t *path = reinterpret_cast<const wchar_t *>(file.utf16());
        wkeSetWkeDllPath(path);
        bool ok = wkeInitialize();
        qDebug() << TIMEMS << QString("init miniblink_%1 %2").arg(flag).arg(ok ? "ok" : "error");
    }
}

void miniblink::release()
{
    wkeFinalize();
}

void miniblink::showEvent(QShowEvent *)
{
    //最开始这个设置放在构造函数中,后面发现会覆盖,于是想到一个办法就是哪个显示就绑定哪个
    //由于偷懒网页中写的是通用的方法所以会冲突,如果不同的方法就没有问题
    //miniblink内核采用了引用计数,为了节省资源,所以后面绑定的一样的则取最后一个
    //只能暂时用这个方法满足目前自身所有项目需求
    //注册通用的接收数据的方法,一定要放在这里在网页加载前执行
    //绑定js函数,让js主动调用C++函数,两个名字可以不一样但是参数必须一致
    wkeJsBindFunction("objName_receiveData", objName_receiveData, this, 2);
}

void miniblink::resizeEvent(QResizeEvent *)
{
    wkeResize(webView, this->width(), this->height());
}

void miniblink::setBgColor(const QColor &color)
{
    wkeViewSettings setting;
    setting.bgColor = color.rgb();
    wkeSetViewSettings(webView, &setting);
}

void miniblink::loadFinish(bool ok)
{
    emit loadFinished(ok);
}

void miniblink::receiveData(const QString &type, const QVariant &data)
{
    emit receiveDataFromJs(type, data);
}

void miniblink::load(const QString &url, bool file)
{
    QByteArray data = url.toUtf8();
    const char *temp = data.data();
    if (file) {
        wkeLoadFile(webView, temp);
    } else {
        wkeLoadURL(webView, temp);
    }
}

void miniblink::setHtml(const QString &html, const QString &baseUrl)
{
    QByteArray dataHtml = html.toUtf8();
    QByteArray dataUrl = baseUrl.toUtf8();
    wkeLoadHtmlWithBaseUrl(webView, dataHtml.data(), dataUrl.data());
}

void miniblink::runJs(const QString &js)
{
    QByteArray data = js.toUtf8();
    wkeRunJS(webView, data.data());
}
```
8条评分好评度+2贡献值+2金钱+15威望+2
weinkym 好评度 +1 - 2022-02-18
weinkym 贡献值 +1 - 2022-02-18
weinkym 威望 +1 - 2022-02-18
weinkym 金钱 +5 - 2022-02-18
20091001753 好评度 +1 - 2022-02-15
20091001753 贡献值 +1 - 2022-02-15
20091001753 威望 +1 - 2022-02-15
20091001753 金钱 +10 - 2022-02-15
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线hitzsf

只看该作者 1楼 发表于: 2022-02-15
miniblink 的确很优秀!  只能windows平台就被限制了呀,期待跨平台能力
离线weinkym

只看该作者 2楼 发表于: 2022-02-18
    
快速回复
限100 字节
 
上一个 下一个