Skip to content

55_使用 QGIS2Web 进行网络地图制作 QGIS3

原文链接: https://www.qgistutorials.com/en/docs/3/web_mapping_with_qgis2web.html

使用 QGIS2Web 进行网络地图制作 (QGIS3)

网络地图是向网络发布您的 GIS 数据并使其对其他用户可访问的优秀媒介。创建网络地图与在 GIS 中创建地图的过程截然不同。GIS 用户通常不是网络程序员，当需要创建一个与 GIS 中创建的地图质量相当的网络地图时，这带来了挑战。幸运的是，有一些工具可以轻松地将您在 QGIS 中的工作成果转换为网络地图。在本教程中，您将学习如何使用 QGIS2Web 插件，从您的 QGIS 项目中创建使用 OpenLayers 或 Leaflet 库的网络地图。

任务概述

我们将创建一个关于世界机场的 Leaflet 网络地图。

您将学到的其他技能

  • 如何在 QGIS 中使用编辑部件来隐藏某些字段并设置自定义类型。
  • 如何使用字段计算器创建虚拟字段。

获取数据

我们将使用来自 Natural Earth 的机场 数据集。

下载机场 shapefile。

为了方便起见，您也可以直接从以下链接下载数据集的副本：

ne_10m_airports.zip

数据来源 [NATURALEARTH]

操作步骤

  1. 打开 QGIS。使用浏览器面板，导航到包含下载文件的文件夹。展开 ne_10m_airports.zip 文件，并将 ne_10m_airports.shp 拖入画布。

../../_images/1163.png

  1. 现在一个新图层将加载到画布中。我们将在 QGIS 中创建一个地图，其外观和行为就像我们希望网络地图呈现的那样。qgis2web 插件将复制 QGIS 设置，并在我们无需了解网络地图库的情况下自动创建网络地图。当用户点击一个机场标记时，我们希望弹出一个信息窗口来显示该机场的有用信息。这些信息已经存在于 ne_10m_airports 图层的属性表中。右键点击 ne_10m_airports 图层并选择属性。

../../_images/2134.png

  1. 在“图层属性”对话框中，切换到“属性窗体”选项卡。您将看到该图层的所有字段名。

../../_images/374.png

  1. 并非所有字段都与用户相关，因此 除 name, iata_code, type, 和 Wikipedia 之外的字段，可以通过点击字段并将其部件类型更改为 Hidden 来关闭。

../../_images/444.png

  1. 在 wikipedia 字段中，勾选 Multiline 和 HTML，以便该字段中的链接将作为超链接呈现给用户。为每个字段设置好相应的部件类型后，点击确定。

../../_images/538.png

  1. 点击工具栏中的“识别要素”按钮。

../../_images/637.png

  1. 点击一个点，这将获取该位置机场的详细信息，只显示 type, name, iata_code 和 wikipedia 字段，因为其他字段已隐藏。同时，wikipedia 字段被高亮显示为超链接。

../../_images/737.png

  1. type 字段中的值可以更具信息性。让我们创建一个名为 class 的新字段，并在 type 字段的每个条目后添加单词 Airport。（即）一个条目 major 将变成 Major Airport。

../../_images/836.png

  1. 输入输出字段名为 class，输出字段类型选择 Text(String)。图层字段 type 包含诸如 small, mid, large 等值。我们可以添加一个表达式来将这些单词更改为首字母大写，并附加单词 airport 以提高可读性。在表达式框中输入以下表达式，然后点击确定。

bash concat( title("type"), ' Airport')

../../_images/937.png

注意

您也可以使用连接符 || 来连接字符串。表达式可以重写为 (title("type") || ' Airport')

  1. 现在我们有了一个更好看的机场类型字段，我们不再需要 type 字段。右键点击图层并选择属性，切换到“属性窗体”选项卡，将 type 字段的部件类型更改为 Hidden 来关闭它。点击确定。

../../_images/1044.png

  1. 现在使用“识别要素”工具选择一个机场，您将看到一个格式良好的新字段 class 显示机场类别，而 type 字段已被移除。

../../_images/1164.png

  1. 现在让我们来设置图层样式，点击打开图层样式面板图标，将类型更改为 Categorized，在值中选择 class，然后点击分类。

../../_images/1247.png

  1. 您会看到不同颜色的圆圈被分配给了不同类型的机场。在本教程中，我们将把地图限制在民用机场。按住 Ctrl 键并选择所有军事机场的类别。选择后，点击删除。

../../_images/1345.png

  1. 除了为不同类别分配不同颜色外，我们还可以更改符号的大小，以在视觉上帮助用户区分不同类型的机场。双击 Major Airport 中的符号图标以更改大小。

../../_images/1441.png

  1. 将大小设置为 4，然后按照上述步骤将 Mid Airport 的大小设置为 3，Small Airport 的大小设置为 2。

../../_images/1535.png

  1. 让我们添加一个用于地理配准的底图，Stamen Watercolor 是这个项目的一个不错的背景地图。要添加该图层，请选择 Web ‣ QuickMapServices ‣ Stamen ‣ Stamen Watercolor。要了解更多关于此插件的信息，请访问 使用插件 (QGIS3) 教程。

../../_images/1632.png

  1. 我们的地图现在已经准备好了。现在是保存我们工作的好时机。点击工具栏中的“保存项目”图标，并输入 Airports 作为项目名称。

../../_images/1734.png

  1. 现在我们准备将我们的项目导出为网络地图。安装 qgis2web 插件，通过选择插件 ‣ 管理并安装插件（有关在 QGIS 中安装插件的更多详细信息，请参见使用插件 (QGIS3)）。插件安装完成后，转到 Web ‣ qgis2web ‣ 创建网络地图。

../../_images/1829.png

  1. 现在会出现“导出为网络地图”对话框。这是自定义网络地图布局的主要控制台。左侧面板包含所有配置选项。您可以更改任何设置，并通过点击“更新预览”在右侧预览更新。该插件可以使用多种不同的网络地图库导出地图。在本教程中，我们将使用 Leaflet 库。请确保您已在底部选择了 Leaflet 选项。

../../_images/1923.png

  1. 现在让我们更改 ne_10m_airport 图层的弹出窗口字段，将所有字段更改为 inline label，这将在地图中检查要素时提供更好的视图。

../../_images/2021.png

  1. 现在切换到“外观”选项卡。勾选以下选项 - 添加地址搜索，定位用户，悬停高亮。在“添加图层列表：”中选择 Collapsed。对于图层搜索，选择 ne_10m_airport: iata_code 字段。此选项添加一个搜索框，用户可以使用机场代码搜索机场。完成所有更改后，点击更新预览。

../../_images/2135.png

  1. 现在，让我们检查添加到地图中的功能，点击查找（双筒望远镜）图标，输入 DXB 并按回车，这将把地图中心定位到迪拜国际机场。

../../_images/2222.png

  1. 点击机场图标以查看有关该机场的信息。

../../_images/2319.png

  1. 点击搜索（放大镜）图标，搜索 new york 并按回车。

../../_images/2419.png

  1. 现在地图将中心定位到纽约市，您可以尝试任何地点/地址来获取位置，此位置是通过对地址进行地理编码检索到的。我们还将添加一个测量工具，以获取网络地图中任意给定点之间的直线距离。在测量工具中选择 Metric。点击更新预览。

../../_images/2518.png

  1. 现在让我们测量 EWR 和 JFK 机场之间以国际单位制表示的直线距离。点击测量（尺子）图标并选择“创建新测量”。然后，点击机场，一旦点被选定，该点的纬度和经度将被捕获并用于计算距离，现在距离以米为单位显示。

../../_images/2615.png

  1. 切换到“导出”选项卡，勾选“压缩 GeoJSON 文件”框。这会减小结果文件的大小。点击导出旁边的 …。

../../_images/2716.png

  1. 选择所需的导出位置（文件夹），点击“选择文件夹”，然后点击“导出”按钮。

../../_images/2817.png

  1. 现在，所有属性、样式和自定义选项都将导出到一个自包含的文件夹中。成功完成后，“进度”弹出对话框中将出现一个链接，点击该链接以打开文件位置。

../../_images/2915.png

  1. 此文件夹将包含创建网络地图所需的所有文件。要查看网络地图，请点击 index.html 文件。

../../_images/3012.png

注意

qgis2web 插件有许多限制，它无法实现强大的网络地图库 OpenLayers 和 Leaflet 所能做的所有事情。此过程可以作为您网络地图制作过程的起点，并通过创建一个基本模板来节省您宝贵的时间，您可以在此模板基础上进一步自定义网络地图。您可以在代码编辑器中编辑这些文件，根据需要进行自定义。

  1. 网络地图将在您的默认网络浏览器中呈现。现在，让我们测试添加到地图中的最后一个选项，即定位用户，点击标记图标。

../../_images/3115.png

  1. 浏览器将请求了解您的位置的权限，点击 允许，现在地图将中心定位到您的当前位置。

../../_images/3212.png

  1. 导出的地图位于您的计算机上。虽然您可以看到它在运行，但由于无法与任何人共享，所以用处不大。为了让其他人能够看到地图，您需要将其上传到网络服务器。虽然上传过程将根据您可访问的服务器类型而异，但一种廉价且简单的方法是将您的地图发布到任何公共云存储服务上。Amazon S3 是一种流行的存储服务，可用于提供像我们地图这样的静态网页。您需要注册一个账户。账户设置完成后，访问 AWS 控制台 并按照说明创建一个存储桶。

../../_images/aws1.png

注意

虽然 AWS 包含慷慨的免费套餐，但如果您超出免费使用限制，使用此服务可能会产生费用。

  1. 存储桶创建后，您可以将导出文件夹的内容上传到存储桶。

../../_images/aws2.png

  1. 如果您希望地图可以公开访问，请确保在上传时选择授予公共读取权限。

../../_images/aws3.png

  1. 数据上传后，找到 index.html 文件。对象 URL 是可用于访问地图的 URL。

../../_images/aws4.png

我已将本练习生成的文件上传到 AWS S3 存储桶。通过 AWS 托管的地图版本已通过 IFrame 嵌入下方。您也可以直接在 https://qgis-tutorials-data.s3.us-east-2.amazonaws.com/qgis2web/index.html 浏览该地图。

如果您想提供反馈或分享您对本教程的经验，请在下方留言。（需要 GitHub 账户）