专栏首页Qt项目实战Qt编写地图综合应用3-省市区域图
原创

Qt编写地图综合应用3-省市区域图

一、前言

省市区域图也可以叫省市轮廓图,就是将每个省份、市区的边界区域变成轮廓展示,只是个大概的轮廓,和真是的地图基本一致,毕竟都是一个个点堆起来的,可能会有很小很小的误差,之前做大屏系统中间那个中国地图的时候,客户千方百计交代清楚,千万要注意有九段线,不然在展会上被别人看到如果连九段线都没有的话会被人骂死,可能在部分早期的数据由于不是很完善所以未必有,后期的最新的地图数据都是有的,包括轮廓图数据。

echart本身是没有提供省市区域轮廓图的,需要引入外部的js文件才能绘制,为了拿到全国各省市的对应轮廓图js文件,特意去网上搜索了很多的相关文章并理解,下载到了对应的省市区域的json数据,然后根据js的规则特意写了个类专门用来转换json数据到js文件,然后生成了所有省市区域的js文件,在echart中用到哪个只需要那个的js文件即可,这些js文件在那个下载地址中都有的,至于这些区域的轮廓图其实是一些乱七八糟的符号具体什么含义我也没有搞懂,你说是base64编码吧仔细看也不像,管他呢,是正确的的能用就行,具体的原理估计也要研究echart的源码才行。

之前的闪烁点图或者迁徙图也好,都是用中国地图轮廓图作为背景的,可以鼠标缩放,其实svg也可以做到类似的效果,类似于矢量图,除了中国地图以外,其实还可以有世界地图,至于世界其他国家的地图估计要自己通过其他方式转换慢慢得到了,按道理来说应该有不少的应用软件给国外客户用的话会有。

二、功能特点

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

三、体验地址

  1. 体验地址:https://pan.baidu.com/s/1uQsDQO5E5crUBN2J-nPeLQ 提取码:1jkp 文件名:bin_map.zip
  2. 国内站点:https://gitee.com/feiyangqingyun
  3. 国际站点:https://github.com/feiyangqingyun
  4. 个人主页:https://blog.csdn.net/feiyangqingyun
  5. 知乎主页:https://www.zhihu.com/people/feiyangqingyun/

四、效果图

QQ截图20200406092701.png

五、相关代码

QStringList EchartJs::getInfoFromData(const QByteArray &data)
{
    //取出对应的城市名称和经纬度
    //以下两种方法测试过解析时间,json大概1S,字符串分割大概5S,json方法更快
    QStringList result;
#if (QT_VERSION > QT_VERSION_CHECK(5,0,0))
    //采用qt内置的json方法解析
    QJsonParseError error;
    QJsonDocument jsonDoc = QJsonDocument::fromJson(data, &error);
    if (error.error == QJsonParseError::NoError) {
        QJsonObject rootObj = jsonDoc.object();
        //qDebug() << rootObj.keys();

        if (rootObj.contains("features")) {
            QJsonArray features = rootObj.value("features").toArray();
            for (int i = 0; i < features.count(); i++) {
                QJsonValue value = features.at(i);
                QJsonObject subObj = value.toObject();
                if (subObj.contains("properties")) {
                    QJsonObject nodeObj = subObj.value("properties").toObject();
                    QStringList list;
                    QJsonArray array = nodeObj.value("cp").toArray();
                    for (int k = 0; k < array.count(); k++) {
                        list << QString::number(array.at(k).toDouble());
                    }

                    QString name = nodeObj.value("name").toString();
                    QString cp = list.join(",");
                    result << QString("%1|%2").arg(name).arg(cp);
                }
            }
        }
    }
#else
    //采用字符串分割方法解析
    QString temp = data;
    temp = temp.mid(0, temp.length() - 24);
    QString flag = "properties";
    int len = temp.length();
    for (int i = 0; i < len; i++) {
        QString str = temp.mid(i, 10);
        if (str == flag) {
            str = temp.mid(i, 100);
            str = str.mid(13, str.indexOf("},") - 13);
            str = str.replace("}", "");
            //到这步数据已经变成 "cp":[121.490317,31.222771],"name":"黄浦区","childNum":1
            //cp name的顺序可能不一样,所以需要分割字符串重新判断
            QString name, cp;
            QStringList list = str.split(",");
            foreach (QString s, list) {
                if (s.startsWith("\"cp\"")) {
                    cp = s.mid(6, s.length());
                } else if (s.startsWith("\"name\"")) {
                    name = s.mid(8, s.length());
                    name = name.replace("\"", "");
                } else if (s.startsWith("\"childNum\"")) {

                } else {
                    //经纬度会拆分成两部分,一部分在这里 31.222771]
                    cp = QString("%1,%2").arg(cp).arg(s.left(s.length() - 1));
                }
            }

            result << QString("%1|%2").arg(name).arg(cp);
        }
    }
#endif
    return result;
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Qt编写地图综合应用7-百度离线地图

    离线地图的核心其实就是拿到这些瓦片地图文件,并不是离线地图的代码怎么写,其实离线地图的网页代码和在线地图的网页代码几乎一致的,主要就是将对应的依赖的js文件从在...

    feiyangqingyun
  • Qt开源作品12-硬盘容量控件

    磁盘容量统计控件,说白了,就是用来统计本地盘符占用的容量,包括但不限于已用空间、剩余空间、总大小、已用百分比等,其中对应的百分比采用进度条显示,该进度条的前景色...

    feiyangqingyun
  • Qt开源作品5-仪表盘交互

    Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webki...

    feiyangqingyun
  • HTML-一个网页的头部的大概框架(完善ing)

    xing.org1^
  • 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    你最喜欢用什么工具来编写机器学习模型?数据科学家们对这个永恒的问题会给出各种不同的答案。一些人喜欢RStudio,另一些人更喜欢Jupyter Notebook...

    大数据文摘
  • 独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    本文首先介绍了TensorFlow.js的重要性及其组件,并介绍使用其在浏览器中构建机器学习模型的方法。然后,构建使用计算机的网络摄像头检测身体姿势的应用程序。

    数据派THU
  • SAP云平台webIDE UI5应用的Application Status菜单实现细节

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 小游戏内存优化与性能优化

    ? | 导语 听说你的小游戏内存超标?进来了解一下吧。 本文主要跟大家一起来探讨一下Cocos Creator小游戏开发过程中内存优化、性能优化和包体优化。 ...

    腾讯NEXT学位
  • Vue.js学习笔记(3)

    程序员不务正业
  • Vuex之结构

    之前整理了vuex的使用场景,现在开始学习学习怎么使用。我会根据官网api来重新学习一遍。

    wade

扫码关注云+社区

领取腾讯云代金券