基于qt的中国地图

baizy77

怎样快速开发一个中国地图组件？
大家好，最近，感觉到地图组件受到了广泛的关注。这是因为通过它可以直观的了解到数据的地理分布，那么怎样利用Qt快速开发一个地图组件呢？
说到用Qt开发地图组件，大家最先想到的就是利用图片和热点的方式实现。比如，利用贴图的方式把中国地图的图片显示出来，然后在省会的位置标注一个圆形图标，当用户单击这个图标的时候，可以弹出相关的信息或者进行进一步的操作（比如下钻）。但是利用图片的方式存在这么几个问题。
1、利用Qt显示多幅图片的时候，会导致CPU使用率偏高，尤其是尺寸稍大的图片。
2、必须为每个省会进行标注，操作繁琐。
其实，有另外一个思路，就是利用QGraphics Scene-View-Item机制来实现。比如，把各个省份当成一个图元，通过读取svg地图中的数据创建各省的图元，当单击各省的时候图元可以发出消息（消息中带有省份信息），应用截获到消息后可以进行进一步的处理。
下面介绍具体步骤。
第一步 下载含有中国地图的svg文件，并放到指定目录。该目录应与程序中设定的目录一致。
第二步 设计、实现地图图元类QExtMapItem，该图元使用svg文件中的数据。
为了节省篇幅，此处仅列出QExtMapItem的部分关键接口。该类派生自QGraphicsObject，目的是为了能重写悬浮事件，以便发出悬浮消息供应用层使用。其中setRect（）接口用来设置图元的位置、尺寸信息。setPath（）用来设置图元的形状信息，该信息来自svg地图。setInformation（）用来设置图元的业务数据，以便应用层可以进行相关处理，比如直接弹出界面显示该信息或者利用该信息到数据库中查询后进行展示。

1. // src/mapitem/qext_mapitem.h
   
2. class QExtMapItem : public QGraphicsObject {
   
3. public:
   
4.     QExtMapItem(QGraphicsItem *parent = nullptr);
   
5.     ~QExtMapItem(){;}
   
6.     void setRect(const QRectF &rct);
   
7.     QRectF rect()  const {
   
8.         return m_rect;
   
9.     }
   
10.     void setPath(const QPainterPath &path) {
    
11.         m_path = path;
    
12.     }
    
13.     QPainterPath path() const {
    
14.         return m_path;
    
15.     }
    
16.     void setInformation(const QString &strInfo) {
    
17.         m_strInfo = strInfo;
    
18.     }
    
19.     QString information() const {
    
20.         return m_strInfo;
    
21.     }
    
22. Q_SIGNALS:
    
23.     void sig_clicked();
    
24. protected:
    
25.     virtual void hoverEnterEvent(QGraphicsSceneHoverEvent *event) override;
    
26.     virtual void hoverLeaveEvent(QGraphicsSceneHoverEvent *event) override;
    
27.     virtual void mousePressEvent(QGraphicsSceneMouseEvent *event) override;
    
28.     virtual void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) override;
    
29.     ...
    
30. };

复制代码

QExtMapItem的实现代码如下。

1. // src/mapitem/qext_mapitem.cpp
   
2. QExtMapItem::QExtMapItem(QGraphicsItem *parent) :
   
3.     QGraphicsObject(parent), m_bHover(false) {
   
4.     setAcceptHoverEvents(true);
   
5.     setFlags(ItemIsSelectable);
   
6. }
   
7. void QExtMapItem::setRect(const QRectF &rct) {
   
8.     m_rect = rct;
   
9. }
   
10. void QExtMapItem::paint(QPainter * painter, const QStyleOptionGraphicsItem * option, QWidget * widget) {
    
11.     if (hover()){
    
12.         painter->setBrush(m_hoverBrush);
    
13.     }
    
14.     else {
    
15.         painter->setBrush(m_staticBrush);
    
16.     }
    
17.     painter->drawPath(m_path);
    
18.     return;
    
19. }
    
20. QRectF  QExtMapItem::boundingRect() const {
    
21.     return m_rect;
    
22. }
    
23. QPainterPath  QExtMapItem::shape() const {
    
24.     return m_path;
    
25. }
    
26. void QExtMapItem::hoverEnterEvent(QGraphicsSceneHoverEvent *event) {
    
27.     QGraphicsObject::hoverEnterEvent(event);
    
28.     setHover(true);
    
29. }
    
30. void QExtMapItem::hoverLeaveEvent(QGraphicsSceneHoverEvent *event) {
    
31.     QGraphicsObject::hoverLeaveEvent(event);
    
32.     setHover(false);
    
33. }
    
34. void QExtMapItem::mousePressEvent(QGraphicsSceneMouseEvent *event) {
    
35.     QGraphicsObject::mousePressEvent(event);
    
36. }
    
37. void QExtMapItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event) {
    
38.     QGraphicsObject::mouseReleaseEvent(event);
    
39.     emit sig_clicked();
    
40. }

复制代码

第三步 编写CParseSvg解析svg文件，构建地图图元。
为了进行解耦，设计CParseSvg类用来解析svg文件。解析svg的代码并不复杂，需要注意的是本案例采用了两遍解析，第一遍计算地图左上角位置，第二遍才构建真正的地图图元。第一遍解析的目的在于将地图偏移至期望的位置。本案例利用QDom进行解析。因篇幅所限，不在此展示CParseSvg的实现。地图的样例如下，其中path对应某个省/自治区的地图数据。案例代码中带有参考的地图样例。

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <!-- (c) ammap.com | SVG map of China - Low -->
   
3. <svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
   
4.     <defs>
   
5.         <style type="text/css"></style>
   
6.     </defs>
   
7.     <g>
   
8.         <path id="CN-34" title="Anhui" class="land" d="M541.02,336.29L541.71,336.09L543.77,338.27L543.53,338,337.22L539.3,337.63z"/>
   
9.         ...
   
10.     </g>
    
11. </svg>

复制代码

第四步，编写自定义视图类CCustomView ，用来模拟对业务信息的处理，比如单击地图上某个省份时，弹出相关信息。视图类的关键代码如下。

1. // src/mapitem/customview.cpp
   
2. CCustomView::CCustomView(QWidget* parent) :
   
3.     ...
   
4.     initialize();
   
5. }
   
6. void CCustomView::initialize() {
   
7.     QGraphicsScene * pScene = new QGraphicsScene();
   
8.     setScene(pScene);
   
9.     m_backgroundColor = Qt::darkBlue;
   
10.     setBackgroundBrush(m_backgroundColor);}
    
11. void CCustomView::slot_itemClicked() {
    
12.     QExtMapItem *pItem = dynamic_cast<QExtMapItem *>(sender());
    
13.     if (NULL == pItem) {
    
14.         return;
    
15.     }
    
16.     QMessageBox::information(this, "", pItem->information());
    
17. }

复制代码

第五步，在main（）函数中构建视图对象，解析svg文件，生成地图。

1. int main(int argc, char* argv[]) {
   
2.     QApplication app(argc, argv);
   
3.     QDialog dialog;
   
4.     //dialog.setWindowFlags(Qt::CustomizeWindowHint |Qt::FramelessWindowHint);
   
5.     dialog.setMouseTracking(true);
   
6.     // 构建视图
   
7.     CCustomView* pView = new CCustomView(&dialog);
   
8.     CParseSvg parseSvg;
   
9.     {
   
10.         QString strPath = QCoreApplication::applicationDirPath();
    
11.         strPath = ns_train::getPath(strPath);
    
12.         if (!strPath.endsWith("/")) {
    
13.             strPath += "/";
    
14.         }
    
15.         QString strSvgFileName = strPath + "chinaLow.svg"; // 程序运行目录下的svg文件
    
16.         qDebug() << strSvgFileName;
    
17.         parseSvg.parseSvgFile(strSvgFileName, pView);
    
18.         QString strTitle = QString::fromLocal8Bit("全国地图");
    
19.         parseSvg.addTitle(strTitle, pView);
    
20.     }
    
21.     QRectF rctView = pView->rect();
    
22.     // 将视图添加到布局
    
23.     gridLayout->addWidget(pView, 0, 0);
    
24.     dialog.exec();
    
25.     return 0;
    
26. }

复制代码

第六步 构建程序，把svg地图放在程序运行目录，启动程序。



返回首页

【当当】  【京东】