当前位置：首页 > article >正文

【Windows7和Windows10下从零搭建Qt+Leaflet开发环境】

article 2025/2/3 22:54:33

Windows7和Windows10下从零搭建Qt+Leaflet开发环境

本文开始编写于2025年1月27日星期一（农历：腊月二十八，苦逼的人，过年了还在忙工作）。

第一章概述

整个开发环境搭建需要的资源：

操作系统
Windows7_x64（以下都简称为Win7）或Windows10（以下简称为Win10），我自己是在实际的Win7上安装测试成功的，Win10是在虚拟机下安装测试成功的。
C++开发环境
Qt5.14.2（含Qt Creator）。
C++编译、调试环境
编译环境：MSVC2017（32/64）（以下简称为vs2017），这里说的是vs2017的编译环境，不是Visual Studio 2017 IDE。
调试环境：Windows10 SDK（以下简称Win10SDK），不要简单认为只是开发包，内含调试器。
地图下载器（下载瓦片地图数据）
Offline Map Maker 8.329。
地图开发库（JavaScript轻量级地图开发库）
Leaflet1.9.4。

还有一件事情需要说明，以下介绍的内容都为离线安装，当然在线也不影响安装。下面就按照上面资源的顺序逐一说明如何下载、安装和测试。

第二章 Qt5.14.2

很多人可能想问：为什么要用Qt5.1.4.2呢？因为目前我的笔记本上使用的操作系统是win7，Qt5.14.2是Win7支持的最后一版Qt，所以就选择了。

1. 下载

Qt5.15之前的离线安装包目前在国内已经被墙了，无法下载，只能利用安装包的命名规律直接用迅雷来下载，直接访问下载地址会显示“Download from your IP address is not allowed”。

以下为Qt5.14.2的安装包和源码的下载链接。

安装包：
https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-windows-x86-5.14.2.exe
https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-mac-x64-5.14.2.dmg
https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-linux-x64-5.14.2.run
https://download.qt.io/new_archive/qt/5.9/5.9.9/qt-opensource-windows-x86-5.9.9.exe
https://download.qt.io/new_archive/qt/5.9/5.9.9/qt-opensource-linux-x64-5.9.9.run
源码地址：
https://download.qt.io/archive/qt/5.14/5.14.2/submodules/qtbase-everywhere-src-5.14.2.tar.xz
https://download.qt.io/archive/qt/5.14/5.14.2/single/qt-everywhere-src-5.14.2.tar.xz

打开迅雷，新建链接，将地址复制进去就可以直接下载了。
在这里插入图片描述

2. 安装

下载完成后，在下载目录双击“qt-opensource-windows-x86-5.14.2.exe”开始安装。

首先，出现欢迎界面，点击“Next”，如下图。
在这里插入图片描述
点击“下一步”，如下图。

选择安装目录（安装完成后大概要占用4.98GB的空间），点击“下一步”，如下图。

如下图勾选，先不要点击“下一步”。这里一定要勾选上“Qt WebEngine”，因为后面需要在Qt中显示网页，并且还要与Leaflet（用JavaScript写的地图轻量级开发库）混合编程。
在这里插入图片描述
如下图勾选，点击“下一步”。

选择“I have read…”，点击“下一步”，如下图。

点击“下一步”，如下图。

点击“安装”，如下图。

正在安装，如下图。

安装完成，点击“下一步”，如下图。
在这里插入图片描述
点击“完成”，如下图。到这里，Qt已经完成安装。

说明：如果在线安装Qt5.14.2的话，在安装过程的前面几步中会有填写Qt官网注册的账号和密码的步骤，需要提前在Qt官网注册账号，离线则没有这一步。

第三章 vs2017+Win10SDK

这里解释一下为什么选择vs2017作为编译器，因为前面选择了QtWebEngine作为混合编程的基础，在Qt5.14.2中自带的mingw编译器不支持编译QtWebEngine模块，而vs2017可以编译。

1. 安装前的准备（Win7）

说明：win10不需要以下步骤。
（1）最好不要有比vs2017更高版本的Visual Studio，否则需要联网才能完成安装过程。
（2）最好有一版不比vs2017版本高的visual studio的完整安装，因为我在虚拟机的win7裸系统中尝试完整个安装过程（第一章介绍的所有资源都安装部署完成）后，测试程序中使用QWebEngineView的load()函数会使程序崩溃，而在装有visual studio 2013（我自己的2个笔记本上都装了）的环境中完成整个安装过程后，测试程序没有任何问题。

2. 下载

这里参考了CSDN博主“闫有尽意无琼”的“qt5.14.2 独立msvc环境搭建（不安装vs）”

原文地址 - https://blog.csdn.net/yanchenyu365/article/details/130105659?ops_request_misc=%257B%2522request%255Fid%2522%253A%252224f424bc4e2297aed1d98c873c9cc584%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=24f424bc4e2297aed1d98

下载链接（阿里云盘分享）- https://www.aliyundrive.com/s/xRnxGiTznH1

3. 安装vs2017

说明：安装前会需要解压，解压目录不要超过80个字符。

下载完成后，找到下载目录的“vs2017_x86_c++生成工具_离线包_自解压文件.exe”，双击开始安装。

点击“Extract”，开始解压，如下图。
在这里插入图片描述
正在解压，如下图。

解压完后稍等，会自动弹出“Visual Studio Installer”，点击“继续”，如下图。

接下来会出现如下两图：“正在准备Visual Studio安装程序”和“正在准备”，都不需要操作。

到这一步，可以开始正式安装了（如下图），建议保持默认配置，不要修改安装目录，直接点击右下角的“安装”即可（我这里的图有误，“关闭”按钮处应该为“安装”）。
在这里插入图片描述
正在安装，如下图。

安装完成，点击右上角的“X”，如下图。

如果安装完毕后提示重启，立刻重启。

4. 安装win10SDK

说明：安装前会需要解压，解压目录不要超过80个字符。

下载完成后，找到下载目录的“17763.132.181022-1834.rs5_release_svc_prod1_WindowsSDK.iso”，先解压，如下图。
在这里插入图片描述
找到解压目录下的“WinSDKSetup.exe”，双击安装。点击“Next”，如下图。

点击“Next”，如下图。

点击“Accept”，如下图。

保持默认选项，点击“Install”，如下图。

正在安装，如下图。

安装完成，点击“Close”，如下图。
在这里插入图片描述
如果安装完毕后提示重启，立刻重启。

第四章配置测试Qt、vs2017和Win10SDK

在上述步骤全部安装完毕后，打开Qt，选择菜单“工具”->“选项”，之后会弹出选项对话框，找到下图位置，点选“Desktop Qt 5.14.2 MSVC 2017 32bit”。
在这里插入图片描述
将下图红框中的内容配置为如下两图其中之一所示（后面测试程序哪个配置没问题用哪个），配置完毕后点击“OK”保存。
说明：一般Qt会自动配置，如果有问题再手动更改为下图之一试试。

“Desktop Qt 5.14.2 MSVC 2017 64bit”类似32bit的配置，只不过编译器选择“amd64”结尾的，调试器选择“x64”目录下的。

mingw的32bit和64bit自动配置好的，不用管。

第五章 Offline Map Maker 8.329

1. 简介

Offline Map Maker官方版是一款由Allmapsoft精心打造的出色离线地图制作工具。Offline Map Maker官方版界面直观、功能强大、专业实用，帮助您从Google地图、Yahoo地图，Bing maps、高德、百度等各大地图平台获取脱机瓦片地图数据。所有下载的脱机图像保存在您的磁盘上，您可以用软件自带的地图查看器查看下载地图。

Offline Map Maker软件功能：
（1）可以产您下载的离线地图，支持缩小或放大离线地图。
（2）输出离线地图以BMP，JPG，TIFF，PNG格式图片输出。
（3）输出适用于OziExplorer软件的xxx.map格式文件。
（4）可以创建一个html文件，可以用网页浏览器html文件并查看离线地图。
（5）您还可以选择将离线地图导出到sqlite数据库中，支持mbtiles格式，然后可以在一些移动设备的app中使用，例如RMaps、Oruxmaps等。
（6）在创建mbtiles文件时，可以使用MBTiles Viewer查看mbtiles文件。

说明：“Offline Map Maker 8.329”是写这篇文章时的最新版，以下简称“omm”。

2. 下载

https://www.allmapsoft.com/omm/index.html

3. 安装

下载解压后，找到解压目录的“omm_setup.exe”，双击安装，进入欢迎安装界面，点击”Next”，如下图。
在这里插入图片描述
选择安装目的地，默认的是“c:\allmapsoft\omm”，如需修改点“Browse”，之后点击“Next”，如下图。

设置开始菜单文件夹，点击“Next”，如下图。

勾选附加任务，创建桌面图标，点击“Next”，如下图。
在这里插入图片描述
确认omm安装信息，点击“Install”开始安装，如下图。

正在安装，如下图。

安装完成，点击“Finish”，如下图。

4. 试用版

上述安装过程完成后，是试用版。试用版的限制就是地图层级精度只能够到13级，但是我认为够用，级数高了地图数据量程几何级数的增长。

建议使用试用版还有一个原因，就是下面“破解版”章节所说的，具体见下面内容。

5. 破解版

如果想用破解版，可以搜索8.025版本（找带破解的）的软件下载，其中的破解程序可以破解8.329版。破解后确实可以下载更高级数的地图，但是破解版会在运行一小段时间后弹出停止对话框，只要点击就退出程序，不点击就不能继续使用程序，哪怕你在下载地图的过程中，也会终止下载进程。

目前自己没有好的解决办法，可以搜索“python、自动化、offline map maker”关键字找到一篇CSDN博客看看，好像是可以解决上述问题。因花钱我没看完整的内容，感觉不是终极解决办法，可能不好用。

第六章 Leaflet1.9.4

1. 简介

Leaflet 是领先的用于桌面、移动友好交互式地图的轻量级开源 JavaScript 库，它拥有大多数开发者所需要的所有地图功能。

Leaflet 在设计时考虑到了简单性、性能和可用性。它可以在所有主要的桌面和移动平台上高效地工作，可以通过大量的插件进行扩展，拥有一个漂亮的、易于使用的、记录良好的 API，以及一个简单的、可读的源代码。
在这里插入图片描述
Leaflet1.9.4是我写这篇文章时的最新版。

2. 下载

下载网址：https://leafletjs.com/download.html
在这里插入图片描述

3. 安装

不用安装配置，解压即可。

4. 测试例程

测试例程是官方写的一个源码，叫做“Quick Start”，网址是：https://leafletjs.com/examples/quick-start/

因为例程中的地图网址不能显示地图，我这里修改为自己下载的离线地图，同时说明一下如何使用Leaflet库。

将下载的Leaflet库解压到某个目录，解压之后如下图。
在这里插入图片描述
之后在解压目录下新建一个index.html，并将下载的离线地图放置到此目录下，目录结构如下图。双击或拖动html文件到浏览器中，就可以浏览了。（说明：用比较新的浏览器，不然会有显示不出来。）

index.html代码如下：

<!DOCTYPE html>

<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quick Start - Leaflet</title>
  <link rel="stylesheet" href="leaflet.css"/>
  <script src="leaflet.js"></script>

  <style>
   html, body
   {
    height: 100%;
    margin: 0;
   }
  </style>
 </head>

 <body>
  <div id="map" style="width: 100%; height: 100%;"></div>

  <script>
   const map = L.map('map').setView([29.5, 100.5], 10);
   const tiles = L.tileLayer('Bing Maps - Background TrafficFlow Chinese (China)/{z}/{x}/{-y}.png', {
    minZoom: 9,
    maxZoom: 12,
    attribution: '&copy; newboy686'
   }).addTo(map);
   const marker = L.marker([29.5, 100.5]).addTo(map).bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
   const circle = L.circle([29.508, 100.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 2000
   }).addTo(map).bindPopup('I am a circle.');
   const polygon = L.polygon([
    [29.609, 100.010],
    [29.503, 100.060],
    [29.610, 100.080]
   ]).addTo(map).bindPopup('I am a polygon.');
   const popup = L.popup()
    .setLatLng([29.513, 100.09])
    .setContent('I am a standalone popup.')
    .openOn(map);

   function onMapClick(e)
   {
    popup
     .setLatLng(e.latlng)
     .setContent(`You clicked the map at ${e.latlng.toString()}`)
     .openOn(map);
   }

   map.on('click', onMapClick);

  </script>
 </body>
</html>

5. 注意事项

代码中的如下图的部分需要注意，其实说的就是其中访问本地离线地图的结构，抽象出来就是“path/to/your/tile/image/{z}/{x}/{y}.imagetype”。
在这里插入图片描述

这里有几个点需要注意：

imagetype：后缀名同瓦片图片后缀（本文都用png了）。
{z}/{x}/{y}.png的存储结构：同瓦片地图的存储结构，可能会有{z}/{x}/{y}/tile.png。
{z}/{x}/{y}.png的解析方式：目前我是不懂。常规是{z}/{x}/{y}.png；有{z}/{y}/{x}.png（这个不懂，只是从网上看到，嘱咐小伙伴注意）；有{z}/{x}/{-y}.png，如上面代码。因为在解决问题的过程中，发现omm用了Leaflet库来加载显示下载到本地的离线瓦片地图（还有google和openlayer，这也是我推荐omm下载瓦片地图的原因，因为用omm下载了瓦片地图，可以参考其解析方式）。
如何参考omm中Leaflet的解析方式：找到对应下载地图文件夹名的leaflet.html，用网页打开，右键查看源码。如下图。

第七章 Qt+Leaflet

在上一章中已经说明了，如何使用Leaflet了，这章就只需要介绍Qt和Qt+Leaft的部分了。

1. 建立Qt Widget App

打开Qt，选择菜单“文件”->“新建文件或项目”，之后如下图新建项目。
在这里插入图片描述
中间过程就不详细介绍了，但是在选择编译器的时候需要注意，如下图。应该选择“MSVC2017 32bit”。

2. 修改pro文件

按照下图，添加对WebEngine和utf-8的支持。
在这里插入图片描述

3. QWebEngineView加载index.html

m_pWebView = new QWebEngineView(this);
m_pWebView->load(QUrl::fromLocalFile("D:/Temp/Qt/qt+leaflet/leaflet-quickstart/index.html"));
m_pWebView->setGeometry(0, 0, 800, 600);
m_pWebView->show();

4. 源码

下载地址：https://download.csdn.net/download/newboy686/90335387?spm=1001.2014.3001.5503

CWidget.h

#ifndef CWIDGET_H
#define CWIDGET_H

#include <QWidget>
#include <QWebEngineView>

QT_BEGIN_NAMESPACE
namespace Ui { class CWidget; }
QT_END_NAMESPACE

class CWidget : public QWidget
{
    Q_OBJECT

public:
    CWidget(QWidget *parent = nullptr);
    ~CWidget();

private:
    Ui::CWidget *       m_pUI;
    QWebEngineView *    m_pWebView;
};
#endif // CWIDGET_H

CWidget.cpp

#include "CWidget.h"
#include "ui_CWidget.h"

CWidget::CWidget(QWidget *parent) :
    QWidget(parent),
    m_pUI(new Ui::CWidget),
    m_pWebView(NULL)
{
    m_pUI->setupUi(this);

    m_pWebView = new QWebEngineView(this);
m_pWebView->load(QUrl::fromLocalFile(
"D:/Temp/Qt/qt+leaflet/leaflet-quickstart/index.html"));
    m_pWebView->setGeometry(0, 0, 800, 600);
    m_pWebView->show();
}

CWidget::~CWidget()
{
    delete m_pUI;
}

5. 运行

在这里插入图片描述

第八章过程中遇到的问题

1. 中文乱码问题的解决

如果在编码过程中使用中文时碰见乱码问题，尤其是由使用mingw编译的工程移植过来的项目，首先应参考上一章“修改pro文件”中添加如下代码。

win32-msvc* {
    QMAKE_CXXFLAGS += /source-charset:utf-8 /execution-charset:utf-8
}

之后，在出现问题的文件中右键菜单，选择“Delete UTF-8 BOM on Save”（如下图），然后在文件中加个空格什么的，再删除，再保存文件，这样才生效。
在这里插入图片描述
如果没有这个选项的话，就需要先选择“Add UTF-8 BOM on Save”（如下图），再选择“Delete UTF-8 BOM on Save”，然后在文件中加个空格什么的，再删除，再保存文件，这样才生效。

最后，再编译一遍，中文乱码问题就解决了。

第九章总结

这是我在工作中需要用Qt开发离线地图时，查了很多资料，尝试过高德离线API+vue的（技术门槛比较高），也看了QGis，也试用了QGeoView，在跟我大学同宿舍老六打电话求助时，偶然发现了leaflet（当时边打电话边在网上查资料，忽然看见了leaflet），然后一路摸索尝试，蹚出了这样的一条技术路线，也算是不易了。

望：能够帮助到看到此文的小伙伴们。

查看全文

http://www.kler.cn/a/530320.html