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

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;     // 存放地图图元组的数组,以瓦片层级为key
        QGraphicsItemGroup* m_mapitemGroup = nullptr;        // 当前显示层级图元
        QHash<int, QGraphicsItemGroup*> m_gridItemGroups;    // 存放地图网格图元组的数组,以瓦片层级为key
        QGraphicsItemGroup* 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);   // 去除后缀,以文件名为y
                    if(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);                           // 设置字体大小为12
        QFontMetrics 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、源码地址

热门相关:佣兵的战争   辰少的霸道专宠:强婚88次   神级幸运星   没有爱过的女人   我的极品美女总裁