One, foreword

Echart itself does not provide the outline map of provinces and cities, so it needs to introduce external JS files to draw it. In order to get the JS files of the corresponding outline map of all provinces and cities in China, I searched a lot of relevant articles on the Internet and downloaded the JSON data of the corresponding provinces and cities. Then, according to the rules of JS, we specially write a class for converting JSON data to JS files, and then generate js files for all provinces and cities. In Echart, we only need that JS file. These JS files are available in that download address. As for the outline diagram of these areas is actually some chaotic symbols what specific meaning I do not understand, you say base64 encoding it is not like a careful look, whatever, it is correct to use the line, the specific principle of estimation also want to study the source code of Echart.

Provinces and cities area map can also be called contour map of city, is to each province, the boundary of the urban area into a contour display, is just a rough outline, and it’s a map of almost the same, after all, are heaping up the points, there may be tiny error, before doing domestic system among the map of China, the customer account one thousand party hundreds, Must pay attention to the nine-dash line, or else in the exhibition will be seen by others if there is no nine-dash line, it will be scolded to death, may be in part of the early data because it is not very perfect so may not have, the latest map data are there, including contour map data.

Before flashing point figure or migration figure, are made with outline map of China as a background, can the mouse zoom, actually the SVG can also achieve a similar effect, similar to the vector graph, in addition to the Chinese map, actually can also have a map of the world, as for the rest of the world map is expected to be his transformation slowly got through other means, In principle, there should be a lot of application software for foreign customers.

Two, functional characteristics

  1. It also supports flash map, migration map, regional map, world map, dashboard, etc.
  2. You can set title, prompt message, background color, text color, line color, region color, and other colors.
  3. You can set the name, value, latitude and longitude of the city.
  4. Map magnification can be set, whether to allow the mouse wheel zoom.
  5. Built-in world map, national map, provincial map, regional map, can be accurate to county, all maps are offline use.
  6. Built-in json data files of various provinces and cities to JS file function, such as data update can be converted by themselves, support single file conversion and one key conversion of all files.
  7. Built-in function to obtain all the name and latitude and longitude information set of the region from JSON file or JS file, you can use this method to obtain information for display.
  8. Depend on the browser component display maps, provide the demo support its page loading/webengine/miniblink/ie many ways.
  9. The miniblink browser kernel eliminates the lack of browser modules in Qt5.6 and later +mingw compilers, enabling the entire project to support all Qt versions and test any version from 4.7 to 6.2.
  10. Flicker dot migration map and other Settings of the dot support separate Settings color.
  11. Provide interface to directly obtain click point information, convenient program linkage processing.
  12. Expand sex is extremely strong, can in the gourd painting gourd ladle to increase all kinds of exquisite echarts components, make the effect of the cow force.
  13. The built-in dashboard component provides interactive functionality, which is included in the demo.
  14. Function interface friendly and unified, easy to use, a class.
  15. Support any Qt version, any system, any compiler.

3. Experience address

  1. Experience address: pan.baidu.com/s/1ZxG-oyUK… Extraction code: O05q File name: bin_map.zip
  2. Domestic site: gitee.com/feiyangqing…
  3. International site: github.com/feiyangqing…
  4. Profile: blog.csdn.net/feiyangqing…
  5. Zhihu homepage: www.zhihu.com/people/feiy…

Four, effect drawing

5. Relevant codes

QStringList EchartJs::getInfoFromData(const QByteArray &data)
{
    // Retrieve the corresponding city name and latitude and longitude
    // The following two methods have tested the parsing time,json is about 1ms, string splitting is about 5ms, JSON method is faster
    QStringList result;
#if (QT_VERSION < QT_VERSION_CHECK(5,0,0))
    // Use the string splitting method to parse
    QString temp = data;
    temp = temp.mid(0, temp.length() - 24);
    QString flag = "properties";
    int count = temp.count(a);for (int i = 0; i < count; ++i) {
        QString str = temp.mid(i, 10);
        if(str ! = flag) {continue;
        }

        str = temp.mid(i, 100);
        str = str.mid(13, str.indexOf("},") - 13);
        str.replace("}"."");
        / / to this data has become a "cp" : [121.490317, 31.222771], "name" : "huangpu district", "childNum" : 1
        // the order of cp names may be different, so we need to split the string to judge again
        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.replace("\" "."");
            } else if (s.startsWith("\"childNum\"")) {}else {
                // Latitude and longitude are divided into two parts, one of which is here 31.222771]
                cp = QString("% 1 and % 2").arg(cp).arg(s.left(s.length() - 1));
            }
        }

        result << QString(| % 2 "% 1").arg(name).arg(cp);
    }
#else
    // Use qt's built-in JSON method for parsing
    QJsonParseError error;
    QJsonDocument jsonDoc = QJsonDocument::fromJson(data, &error);
    if (error.error == QJsonParseError::NoError) {
        QJsonObject rootObj = jsonDoc.object(a);//qDebug() << rootObj.keys();
        if(! rootObj.contains("features")) {
            return QStringList(a); } QJsonArray features = rootObj.value("features").toArray(a);int count = features.count(a);for (int i = 0; i < count; ++i) {
            QJsonObject subObj = features.at(i).toObject(a);if(! subObj.contains("properties")) {
                continue;
            }

            QJsonObject nodeObj = subObj.value("properties").toObject(a); QJsonArray array = nodeObj.value("cp").toArray(a); QStringList list;for (int j = 0; j < array.count(a); ++j) { list << QString::number(array.at(j).toDouble()); } QString name = nodeObj.value("name").toString(); QString cp = list.join(","); result << QString("%1|%2").arg(name).arg(cp); } } #endifreturn result;
}
Copy the code