Qt —— QWebEngineView加载谷歌离线地图（包含离线地图瓦片下载制作、附谷歌地图开发文档）

已于 2025-03-27 18:19:23 修改
阅读量1w 收藏 109
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Qt 文章标签： qt 地图 离线地图
于 2020-06-02 11:36:20 首次发布
automoblie0
本文链接：https://blog.youkuaiyun.com/automoblie0/article/details/106492882
本文介绍了如何使用Qt的QWebEngineView控件加载离线谷歌地图，包括离线地图瓦片的下载、本地HTML加载和Qt编程方法。首先，使用水经注万能地图下载器获取谷歌地图瓦片，然后在Qt项目中设置QWebEngineView，通过加载含有离线地图的HTML文件实现地图显示。

🔔 Qt 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）

 

Qt效果

在这里插入图片描述

 
在这里插入图片描述

 

说明

     在工程项目中经常会与地图打交道，那么客户端软件如何加载地图呢？一种是加载在线地图，该加载方式优点是有网络情况下编程较为方便；缺点是必须有网并不利于对地图进行显示编程。相对的另外一种加载方式就是离线地图了，该加载方式基本没有什么缺点但只是需要编程前对离线地图进行制作仅可。

     本文介绍离线加载方式并会介绍地图瓦片的下载与本地html加载、Qt加载离线html方法等。

 

准备

     1、水经注万能地图下载器

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Qt实现离线缓存地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-23 674
Qt实现离线缓存地图（附完整源码）
Qt加载百度地图和谷歌地图
11-30
让Qt完美的加载百度地图和谷歌地图，涉及到了js和html。Qt中加载网页，需要用到这个QWebView这个类，就可以将网页加载出来。Qt 551MSVC版本
Qt4.8.5版本加载谷歌地图.zip
11-25
Qt4.8.5版本加载谷歌地图，网页显示，可以调节大小，缩放地图，鼠标操作，可实现跨平台运行 谷歌地图可以修改网页参数，显示对应的位置
Qt加载百度地图详细流程（附带报错解决方法）
最新发布
qq_60018273的博客
09-11 1273
一篇文章看懂Qt如何加载出百度地图......
Qt加载离线地图
热门推荐
pzs0221的专栏
04-24 1万+
一、例子 QWebEngineView加载谷歌离线地图 二、
GIS开发三：加载谷歌离线地图（QWebEngineView）
WHEgqing的专栏
03-31 1637
参考文档 QWebEngineView加载谷歌离线地图 中介绍通过水经注万能地图下载器可以下载所需的离线地图。但是这个水经注需要注册后才能下载地图。 参考文档 GIS开发二：批量下载和拼接地图瓦片 中介绍了如何手搓代码下载所需的离线地图。
Qgis二次开发-加载本地离线瓦片地图
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
07-30 6635
此方法不好用，我使用这个方法之后，对于高德下载的瓦片地图使用起来会存在问题，高德的地图层级。修改nginx的nginx.conf文件，添加如下的路径，我监听的本地9090端口。具体的QgsXyzConnection类定义：看如下文章。启动服务，成功之后，看起来就像这样。
Qt加载google earth
07-04
借助Com组件，加载Google Earth，通过调用Google Earth API，使地图显示在Qt界面之中，讲解链接https://blog.youkuaiyun.com/zmxzmx110/article/details/80914006
QT5 QWebEngineView实现离线百度地图API
05-30
QT5 QWebEngineView实现离线百度地图API
Qt加载百度离线地图
12-01
Qt4.8.6加载百度离线地图，实现了街道图和卫星图的切换，实现了地图中标签的移动，实现了获取地图坐标并在Qt界面显示。绝对原创，保证可用
QT加载地图百度地图离线加载
05-06
QT加载地图百度地图离线加载
QT5.9.2 QWebEngineView实现百度离线地图示例
05-22
使用Qt5.9.2实现百度离线地图，可以用于离线地图的项目开发中。代码中给出了Qt给js发送数据和js给Qt发送数据的双向传递
Qt加载百度离线地图 百度地图离线API 1.3 保证可用
01-22
Qt加载百度离线地图 1.下载百度地图离线API 1.3 下载链接：http://download.youkuaiyun.com/detail/caoshangpa/9476608，网上虽然出现了2.0版本离线API，但是经试用，存在很多问题。该1.3版本离线API也是由高人制作，我只是优化了一下，去掉了百度的logo。 2.下载瓦片地图 百度地图是由一张张正方形瓦片组成，在拖动地图时，只加载可视范围内的瓦片。如下图所示，每个方格代表一个瓦片，这样就可以通过访问百度瓦片地图服务器下载瓦片地图。有高人制作了下载工具，**电子地图下载器。 3.加载瓦片地图 将下载的地图放在百度离线API指定的目录下，当然这个目录是可以通过API的源码更改的。我使用的目录是maptile(卫星地图)和maptile_(街道地图)。这样通过html引用百度离线API时，地图就显示出来了。 参考链接：http://www.cnblogs.com/i-gps/archive/2012/11/28/2791826.html 4.Qt与JavaScript的交互 当QWebkit加载html显示地图后，只能显示地图，如果想通过Qt界面操作地图或者将地图信息显示到Qt界面，就需要实现Qt与JavaScript的交互，这可以参考我的另一篇微博http://blog.youkuaiyun.com/caoshangpa/article/details/51014690 最终的结果如下图所示，实现了地铁经纬度的显示，街道图和卫星图的切换和标注的移动
QT5 QWebEngineView实现百度离线地图示例（ubuntu系统下再解压）
01-04
.tar.gz格式，ubuntu系统下可正常解压 使用Qt5.9.2实现百度离线地图，可以用于离线地图的项目开发中。代码中给出了Qt给js发送数据和js给Qt发送数据的双向传递
【免费下载】 QT加载百度离线地图教程
gitblog_06517的博客
09-20 1066
QT加载百度离线地图教程 【下载地址】QT加载百度离线地图教程 QT加载百度离线地图教程本仓库提供了一个资源文件，详细介绍了如何在QT中加载百度离线地图 项目地址: https://gitcode.com/Resource-Bun...
qt widget加载瓦片地图
08-23
<think>我们正在讨论Qt Widget加载瓦片地图的实现方法。根据引用[1]，虽然它提到了使用webEngine加载百度地图，但用户现在明确要求使用Qt Widget加载瓦片地图（即离线瓦片地图）。因此，我们需要考虑不使用Web引擎，而是直接在Qt Widget中绘制地图瓦片。 实现思路： 1. 获取瓦片地图：首先需要下载离线瓦片地图（通常以行列号命名的图片文件，按照一定的目录结构存储）。 2. 地图坐标系统：瓦片地图通常采用墨卡托投影（Web Mercator），我们需要将地理坐标（经纬度）转换为地图坐标（像素），再转换为瓦片坐标（行列号）。 3. 显示瓦片：在Qt Widget中，我们可以使用QGraphicsView和QGraphicsScene来管理瓦片图片，或者直接使用QPainter在Widget上绘制。 4. 加载和渲染：根据当前视图的范围，计算需要加载的瓦片，然后加载对应的图片并绘制到界面上。 5. 交互功能：实现鼠标拖动地图、缩放等功能。 具体步骤： 1. 准备瓦片数据： 下载的瓦片通常按照z/x/y.png（或.jpg）的目录结构存储，其中z表示缩放级别，x和y表示瓦片的行列号。 2. 创建自定义Widget： 我们可以继承QWidget，重写paintEvent方法，在paintEvent中绘制瓦片。同时，为了支持拖动和缩放，需要处理鼠标事件。 3. 坐标转换： - 地理坐标（经纬度）转地图坐标（像素）： $$ x = \frac{longitude + 180}{360} \times 256 \times 2^z $$ $$ y = \left( \frac{1}{2} - \frac{\ln(\tan(\phi) + \sec(\phi))}{2\pi} \right) \times 256 \times 2^z $$ 其中$\phi$是纬度（弧度），经度$longitude$（度数）。注意：在瓦片地图中，原点在左上角，所以纬度越高，y值越小。 - 地图坐标转瓦片坐标： $$ tileX = \lfloor \frac{x}{256} \rfloor $$ $$ tileY = \lfloor \frac{y}{256} \rfloor $$ 然后根据当前缩放级别z，在对应的目录下找到瓦片图片。 4. 实现绘制： 在paintEvent中，根据当前窗口的显示范围（由中心点和缩放级别决定），计算需要绘制的瓦片范围，然后逐个加载瓦片并绘制到正确的位置。 5. 缓存机制： 由于瓦片数量可能很大，需要实现缓存，避免重复加载和释放。 6. 交互： - 鼠标按下记录位置，移动时计算偏移量，从而改变中心点，实现拖动。 - 滚轮事件实现缩放。 示例代码框架： ```cpp #include <QWidget> #include <QPainter> #include <QPixmap> #include <QPoint> #include <QWheelEvent> #include <cmath> class TileMapWidget : public QWidget { Q_OBJECT public: TileMapWidget(QWidget *parent = nullptr) : QWidget(parent), zoom(13), centerLongitude(120.393751), centerLatitude(36.065743) { // 设置初始中心点和缩放级别 } protected: void paintEvent(QPaintEvent *event) override { QPainter painter(this); // 根据当前中心点和缩放级别，计算需要绘制的瓦片范围 // 计算当前中心点对应的地图坐标（像素） // 然后计算窗口左上角和右下角对应的地图坐标，再转换为瓦片坐标 // 遍历这个范围内的瓦片，加载图片并绘制 // 注意：瓦片加载可能需要异步，这里简化处理，使用本地文件 // 瓦片路径：QString path = QString("tiles/%1/%2/%3.png").arg(zoom).arg(tileX).arg(tileY); // 绘制瓦片时，需要计算瓦片在窗口中的位置（左上角坐标） } void mousePressEvent(QMouseEvent *event) override { if (event->button() == Qt::LeftButton) { lastPos = event->pos(); } } void mouseMoveEvent(QMouseEvent *event) override { if (event->buttons() & Qt::LeftButton) { QPoint delta = event->pos() - lastPos; lastPos = event->pos(); // 根据移动的像素距离，调整中心点的经纬度（需要将像素距离转换为经纬度偏移量） // 这里简化：假设移动delta像素，则地图中心点反向移动delta（因为拖动时地图和鼠标是反向的） // 需要将像素偏移转换为经纬度偏移，与缩放级别有关 // 更新centerLongitude和centerLatitude update(); // 重绘 } } void wheelEvent(QWheelEvent *event) override { int numDegrees = event->delta() / 8; int numSteps = numDegrees / 15; zoom += numSteps; if (zoom < 1) zoom = 1; if (zoom > 18) zoom = 18; update(); } private: int zoom; // 当前缩放级别 double centerLongitude; // 中心点经度 double centerLatitude; // 中心点纬度 QPoint lastPos; // 用于记录鼠标位置 }; ``` 注意：上述代码只是一个框架，实际实现中需要处理坐标转换的细节，以及瓦片加载的性能问题（可能需要多线程加载）。另外，瓦片投影公式的简化：在低纬度地区，可以使用简化的公式，但高纬度地区需要完整的墨卡托投影公式。 由于瓦片地图的坐标系统是标准的，我们也可以参考已有的开源项目，比如QMapControl（一个基于Qt的地图控件，但需要确认是否支持瓦片地图）。 相关问题： 1. 如何下载离线瓦片地图？ 2. 在Qt中如何高效加载和绘制大量瓦片图片？ 3. 如何实现地图的旋转和倾斜效果？ 根据用户需求，我们给出了一个基本的实现框架，但实际开发中还需要考虑很多细节。</think>### Qt Widget加载瓦片地图实现方法 在Qt Widget中加载离线瓦片地图，可通过以下步骤实现： #### 1. **准备瓦片地图数据** - 使用地图下载器（如全能地图下载器）下载所需区域的瓦片 - 瓦片存储格式：`z/x/y.png`（z=缩放级别，x/y=瓦片坐标） - 将瓦片文件夹放入项目目录（如`tiles/`） #### 2. **核心实现原理** - 使用`QGraphicsView` + `QGraphicsScene`作为渲染容器 - 通过经纬度计算瓦片坐标： $$ tileX = \left\lfloor \frac{lng + 180}{360} \times 2^z \right\rfloor $$ $$ tileY = \left\lfloor \left(1 - \frac{\ln(\tan(\phi) + \sec(\phi))}{\pi}\right) \times 2^{z-1} \right\rfloor $$ 其中$\phi$为纬度（弧度），$z$为缩放级别 #### 3. **代码实现框架** ```cpp // 瓦片地图部件 class TileMapWidget : public QGraphicsView { public: TileMapWidget(QWidget* parent = nullptr) : QGraphicsView(parent), scene(new QGraphicsScene(this)) { setScene(scene); setDragMode(ScrollHandDrag); // 支持拖拽 } void loadTiles(int zoom, double centerLat, double centerLng) { scene->clear(); // 计算可见区域瓦片坐标范围 QPoint centerTile = latLngToTile(centerLat, centerLng, zoom); // 加载可见瓦片 (示例取周围2x2范围) for(int x = centerTile.x()-1; x <= centerTile.x()+1; ++x) { for(int y = centerTile.y()-1; y <= centerTile.y()+1; ++y) { QString path = QString("tiles/%1/%2/%3.png").arg(zoom).arg(x).arg(y); if(QFile::exists(path)) { QPixmap pix(path); QGraphicsPixmapItem* item = scene->addPixmap(pix); item->setPos(x * 256, y * 256); // 瓦片定位 } } } } private: QPoint latLngToTile(double lat, double lng, int z) { double latRad = qDegreesToRadians(lat); double n = qPow(2.0, z); int x = static_cast<int>((lng + 180.0) / 360.0 * n); int y = static_cast<int>((1.0 - qLn(qTan(latRad) + 1/qCos(latRad)) / M_PI) / 2.0 * n); return QPoint(x, y); } QGraphicsScene* scene; }; ``` #### 4. **使用示例** ```cpp // 主窗口中使用 MainWindow::MainWindow(QWidget* parent) : QMainWindow(parent) { TileMapWidget* mapWidget = new TileMapWidget(this); setCentralWidget(mapWidget); // 加载青岛区域瓦片(缩放级别13) mapWidget->loadTiles(13, 36.065743, 120.393751); } ``` #### 5. **优化建议** 1. **动态加载**：根据视图范围实时加载/卸载瓦片 2. **缓存机制**：使用`QPixmapCache`缓存常用瓦片 3. **多线程加载**：通过`QThreadPool`异步加载瓦片 4. **坐标转换**：添加屏幕坐标⇔经纬度转换方法 5. **标记支持**：继承`QGraphicsItem`实现自定义标记点 #### 注意事项 - 瓦片坐标系原点在左上角（Y轴向下） - 不同地图供应商（如Google/Bing）瓦片编号规则可能不同 - 高缩放级别时需注意内存管理（及时清理不可见瓦片） > 引用[1]中提到的WebEngine方案适用于在线地图，而本方法针对离线瓦片地图场景，更适合纯Qt Widget应用的需求[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

信必诺

嗨，支持下哥们呗。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值