C++(Qt)-GIS开发-QGraphicsView显示瓦片地图简单示例

news/2024/10/5 21:50:04/

QGraphicsView_0">C++(Qt)-GIS开发-QGraphicsView显示瓦片地图简单示例

文章目录

更多精彩内容
👉个人内容分类汇总 👈
👉GIS开发 👈

1、概述

  1. 支持多线程加载显示本地离线瓦片地图(墨卡托投影);
  2. 瓦片切片规则以左上角为原点(谷歌、高德、ArcGis等),不支持百度瓦片规则;
  3. 支持显示瓦片网格、编号信息。
  4. 支持鼠标滚轮缩放切换地图层级。
  5. 支持鼠标拖拽。
  6. 采用z/x/y层级瓦片存储格式。
  7. 在单文件中实现所有主要功能,简单便于理解。
  8. QGraphicsView原点为起始位置,将加载的第一张瓦片显示在原点,其它瓦片相对于第一张瓦片进行显示【相对像素坐标】。

开发环境说明

  • 系统:Windows11、Ubuntu20.04
  • Qt版本:Qt 5.14.2
  • 编译器:MSVC2017-64、GCC/G++64

2、实现效果

使用瓦片地图工具下载z/x/y存储格式的瓦片地图进行显示。

在这里插入图片描述

3、主要代码

  • mapgraphicsview.h文件

    #ifndef MAPGRAPHICSVIEW_H
    #define MAPGRAPHICSVIEW_H#include <QGraphicsView>
    #include <QGraphicsScene>
    #include <QFuture>class MapGraphicsView : public QGraphicsView
    {Q_OBJECT
    public:explicit MapGraphicsView(QWidget *parent = nullptr);~MapGraphicsView();void setPath(const QString& path);void quit();protected:void wheelEvent(QWheelEvent *event) override;signals:void addImage(QPixmap img, QPoint pos);
    private:void getMapLevel();     // 获取路径中瓦片地图的层级void getTitle();        // 获取路径中瓦片地图编号void loatImage();       // 加载瓦片void clearReset();       // 清除重置所有内容int getKey();          // 获取当前显示的层级key值void on_addImage(QPixmap img, QPoint pos);private:QGraphicsScene* m_scene = nullptr;QString m_path;          // 瓦片地图文件路径QHash<int, QGraphicsItemGroup*> m_mapItemGroups;     // 存放地图图元组的数组,以瓦片层级为keyQGraphicsItemGroup* m_mapitemGroup = nullptr;        // 当前显示层级图元QHash<int, QGraphicsItemGroup*> m_gridItemGroups;    // 存放地图网格图元组的数组,以瓦片层级为keyQGraphicsItemGroup* m_griditemGroup = nullptr;       // 当前显示层级网格图元int m_keyIndex = 0;               // 当前显示的瓦片层级QVector<QPoint> m_imgTitle;       // 保存图片编号QFuture<void> m_future;
    };#endif // MAPGRAPHICSVIEW_H
  • mapgraphicsview.cpp文件

    #include "mapgraphicsview.h"#include <QDir>
    #include <QDebug>
    #include <QGraphicsItemGroup>
    #include <QtConcurrent>
    #include <QWheelEvent>MapGraphicsView* g_this = nullptr;
    MapGraphicsView::MapGraphicsView(QWidget *parent) : QGraphicsView(parent)
    {m_scene = new QGraphicsScene(this);this->setScene(m_scene);g_this = this;connect(this, &MapGraphicsView::addImage, this, &MapGraphicsView::on_addImage);this->setDragMode(QGraphicsView::ScrollHandDrag);      // 设置鼠标拖拽
    //    QThreadPool::globalInstance()->setMaxThreadCount(1);   // 可以设置线程池线程数
    }MapGraphicsView::~MapGraphicsView()
    {g_this = nullptr;quit();   // 如果程序退出时还在调用map就会报错,所以需要关闭
    }/*** @brief 退出多线程*/
    void MapGraphicsView::quit()
    {if(m_future.isRunning())   // 判断是否在运行{m_future.cancel();               // 取消多线程m_future.waitForFinished();      // 等待退出}
    }/*** @brief       设置加载显示的瓦片地图路径* @param path*/
    void MapGraphicsView::setPath(const QString &path)
    {if(path.isEmpty()) return;m_path = path;getMapLevel();      // 获取瓦片层级loatImage();        // 加载第一层瓦片
    }/*** @brief        鼠标缩放地图* @param event*/
    void MapGraphicsView::wheelEvent(QWheelEvent *event)
    {QGraphicsView::wheelEvent(event);if(m_future.isRunning())   // 判断是否在运行{return;}if(event->angleDelta().y() > 0)   // 放大{if(m_keyIndex < m_mapItemGroups.count() -1){m_keyIndex++;}}else{if(m_keyIndex > 0){m_keyIndex--;}}loatImage();        // 加载新的层级瓦片
    }/*** @brief 计算瓦片层级*/
    void MapGraphicsView::getMapLevel()
    {if(m_path.isEmpty()) return;clearReset();    // 加载新瓦片路径时将之前的内容清空QDir dir(m_path);dir.setFilter(QDir::Dirs | QDir::NoDotAndDotDot);    // 设置过滤类型为文件夹,且不包含隐藏文件夹dir.setSorting(QDir::Name);                          // 设置按文件夹名称排序QStringList dirs = dir.entryList();for(auto& strDir : dirs){bool ok;int level = strDir.toInt(&ok);if(ok){if(!m_mapItemGroups.contains(level))  // 如果不包含{// 初始化加载所有瓦片层级到场景中,默认不显示QGraphicsItemGroup* itemMap = new QGraphicsItemGroup();m_scene->addItem(itemMap);itemMap->setVisible(false);m_mapItemGroups[level] = itemMap;// 初始化加载所有瓦片层级网格到场景中,默认不显示QGraphicsItemGroup* itemGrid = new QGraphicsItemGroup();m_scene->addItem(itemGrid);itemGrid->setVisible(false);m_gridItemGroups[level] = itemGrid;}}}
    }/*** @brief 获取当前显示层级中所有瓦片的编号*/
    void MapGraphicsView::getTitle()
    {QString path = m_path + QString("/%1").arg(getKey());    // z  第一层文件夹QDir dir(path);dir.setFilter(QDir::Dirs | QDir::NoDotAndDotDot);    // 设置过滤类型为文件夹,且不包含隐藏文件夹dir.setSorting(QDir::Name);                          // 设置按文件夹名称排序QStringList dirs = dir.entryList();QPoint point;for(auto& strDir : dirs){bool ok;int x = strDir.toInt(&ok);                         // x层级 第二层文件夹if(ok){point.setX(x);dir.setPath(path + QString("/%1").arg(x));dir.setFilter(QDir::Files | QDir::NoDotAndDotDot);    // 设置过滤类型为文件,且不包含隐藏文件dir.setSorting(QDir::Name);                           // 设置按文件夹名称排序QStringList files = dir.entryList();for(auto& file: files){int y = file.split('.').at(0).toInt(&ok);   // 去除后缀,以文件名为yif(ok){point.setY(y);m_imgTitle.append(point);}}}}
    }QString g_path;   // 保存当前层级路径
    /*** @brief       在多线程中加载图片* @param point*/
    void readImg(const QPoint& point)
    {QString path = QString("%1/%2/%3.jpg").arg(g_path).arg(point.x()).arg(point.y());QPixmap image;if(image.load(path)){if(g_this){emit g_this->addImage(image, point);   // 由于不能在子线程中访问ui,所以这里通过信号将图片传递到ui线程进行绘制}}
    //    QThread::msleep(50);     // 加载时加上延时可以更加清晰的看到加载过程
    }/*** @brief 加载显示瓦片图元*/
    void MapGraphicsView::loatImage()
    {quit();                  // 加载新瓦片之前判断是否还有线程在运行m_imgTitle.clear();if(m_mapitemGroup){m_mapitemGroup->setVisible(false);        // 隐藏图层m_griditemGroup->setVisible(false);       // 隐藏图层}m_mapitemGroup = m_mapItemGroups.value(getKey());m_griditemGroup = m_gridItemGroups.value(getKey());if(!m_mapitemGroup || !m_griditemGroup) return;if(m_mapitemGroup->boundingRect().isEmpty())   // 如果图元为空则加载图元显示{getTitle();      // 获取新层级的所有瓦片编号g_path = m_path + QString("/%1").arg(getKey());m_future = QtConcurrent::map(m_imgTitle, readImg);}m_mapitemGroup->setVisible(true);              // 显示新瓦片图层m_griditemGroup->setVisible(true);             // 显示新网格图层m_scene->setSceneRect(m_mapitemGroup->boundingRect());   // 根据图元大小自适应调整场景大小
    }/*** @brief 清除重置所有内容*/
    void MapGraphicsView::clearReset()
    {if(m_mapItemGroups.isEmpty()) return;m_keyIndex = 0;m_mapitemGroup = nullptr;m_griditemGroup = nullptr;m_imgTitle.clear();QList<int>keys = m_mapItemGroups.keys();for(auto key : keys){// 清除瓦片图元QGraphicsItemGroup* item = m_mapItemGroups.value(key);m_scene->removeItem(item);    // 从场景中移除图元delete item;m_mapItemGroups.remove(key);   // 从哈希表中移除图元// 清除网格item = m_gridItemGroups.value(key);m_scene->removeItem(item);     // 从场景中移除图元delete item;m_gridItemGroups.remove(key);   // 从哈希表中移除图元}
    }/*** @brief   获取当前层级的key值* @return  返回-1表示不存在*/
    int MapGraphicsView::getKey()
    {if(m_mapItemGroups.isEmpty()) return -1;QList<int>keys = m_mapItemGroups.keys();std::sort(keys.begin(), keys.end());    // 由于keys不是升序的,所以需要进行排序if(m_keyIndex < 0 || m_keyIndex >= keys.count()){return -1;}return keys.at(m_keyIndex);
    }/*** @brief       绘制地图瓦片图元* @param img   显示的图片* @param pos   图片显示的位置*/
    void MapGraphicsView::on_addImage(QPixmap img, QPoint pos)
    {if(!m_mapitemGroup || m_imgTitle.isEmpty()){return;}// 计算瓦片显示位置,默认为256*256的瓦片大小QPoint& begin = m_imgTitle.first();int x = (pos.x() - begin.x()) * 256;int y = (pos.y() - begin.y()) * 256;// 绘制瓦片QGraphicsPixmapItem* itemImg = new QGraphicsPixmapItem(img);itemImg->setPos(x, y);   // 以第一张瓦片为原点m_mapitemGroup->addToGroup(itemImg);// 绘制网格、QGraphicsRectItem* itemRect = new QGraphicsRectItem(x, y, 256, 256);m_griditemGroup->addToGroup(itemRect);itemRect->setPen(QPen(Qt::red));// 绘制编号QString text = QString("%1,%2,%3").arg(pos.x()).arg(pos.y()).arg(getKey());QGraphicsSimpleTextItem* itemText = new QGraphicsSimpleTextItem(text);QFont font;font.setPointSize(14);                           // 设置字体大小为12QFontMetrics metrics(font);qreal w = metrics.horizontalAdvance(text) / 2.0; // 计算字符串宽度qreal h = metrics.height() / 2.0;               // 字符串高度itemText->setPos(x + 128 - w, y + 128 - h);     // 编号居中显示itemText->setFont(font);itemText->setPen(QPen(Qt::red));m_griditemGroup->addToGroup(itemText);m_scene->setSceneRect(m_mapitemGroup->boundingRect());   // 根据图元大小自适应调整场景大小
    }

4、源码地址

  • github
  • gitee

http://www.ppmy.cn/news/1473541.html

相关文章

51单片机嵌入式开发:3、STC89C52操作8八段式数码管原理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 STC89C52操作8八段式数码管原理 1 8位数码管介绍1.1 8位数码管概述1.2 8位数码管原理1.3 应用场景 2 原理图图解2.1 74HC573原理2.2 74HC138原理2.3 数码管原理 3 数码管程序…

罗剑锋的C++实战笔记学习(一):const、智能指针、lambda表达式

1、const 1&#xff09;、常量 const一般的用法就是修饰变量、引用、指针&#xff0c;修饰之后它们就变成了常量&#xff0c;需要注意的是const并未区分出编译期常量和运行期常量&#xff0c;并且const只保证了运行时不直接被修改 一般的情况&#xff0c;const放在左边&…

K8S两种安装方式如何选择?

K8S两种安装方式如何选择&#xff1f;\nKubeadm VS kubernetes 二进制\n\n1、kubeadm 方式部署&#xff08;推荐&#xff09;\n推荐理由&#xff1a;\n\n官方推荐&#xff1a;kubeadm 是 Kubernetes 官方提供的工具&#xff0c;用于快速搭建生产级别的 Kubernetes 集群&#xf…

第十四届蓝桥杯省赛C++B组G题【子串简写】题解(AC)

题目大意 给定字符串 s s s&#xff0c;字符 a , b a, b a,b&#xff0c;问字符串 s s s 中有多少个 a a a 开头 b b b 结尾的子串。 解题思路 20pts 使用二重循环枚举左端点和右端点&#xff0c;判断是否为 a a a 开头 b b b 结尾的字符串&#xff0c;是则答案加一…

JS+CSS+HTML项目-中国国家图书馆

页面做的不多&#xff0c;CSS效果请看哔哩哔哩

自动机器学习框架

☆ 自动机器学习框架 ★ 几种自动机器学习的框架 Tpot import pandas as pd# X_py,y_pypython_X ...... python_y ......from tpot import TPOTClassifier,TPOTRegressor from sklearn.datasets import load_digits from sklearn.model_selection import train_test_split…

msys2安装make和cmake

msys2安装make和cmake 上来先安装一个基础工具包&#xff08;mingw-w64工具链&#xff09;&#xff1a; pacman -S mingw-w64-x86_64-toolchain这个工具链不包含make、cmake。 1.安装make $ pacman -Qs make local/make 4.4.1-2GNU make utility to maintain groups of pro…

【51单片机入门】数码管原理

文章目录 前言共阴极与共阳极数码管多个数码管显示原理 总结 前言 在我们的日常生活中&#xff0c;数码管被广泛应用于各种电子设备中&#xff0c;如电子表、计时器、电子钟等。数码管的主要功能是显示数字和一些特殊字符。在这篇文章中&#xff0c;我们将探讨数码管的工作原理…