此前，我们曾借助 Amap Extension 插件制作《G331 国道吉林段自驾游路书》AMap Extension，并为途经点图层分别通过一对一、一对多的方式批量添加了图片附件批量添加本地图片附件。本期将以此数据为实操案例，详细讲解如何使用 qgis2web 插件生成网页地图，并完成在 GitHub 上的部署。

GitHub 演示地址：https://cmd1994.github.io/lushu/

一、安装方法

• 打开 QGIS 软件，点击顶部菜单栏插件→管理并安装插件；
• 在插件搜索框中输入qgis2web，找到对应插件；
• 点击安装插件按钮，等待插件自动安装完成；
• 安装成功后，可在顶部web菜单中找到 qgis2web 功能入口，或直接在工具栏看到插件图标；

二、界面初识

点击插件图标后，会弹出配置对话框，核心布局如下：

• 对话框左侧为配置区，右侧为实时预览区；
• 左

  侧上方设有 5 个功能选项卡，分别是：
• Layers and Groups：图层与图层组的显示、交互配置；
• Appearance：网页地图的外观样式定制；
• Export：导出参数设置；
• Settings：插件基础设置；
• WIKI：官方文档的查看入口；
• 左

  侧下方可选择网页地图的框架（二选一）：
• OpenLayers：全能型 WebGIS 框架，功能全面、样式还原度高；
• Leaflet：轻量化 WebGIS 框架，加载速度快、适配移动端；
• 配置完成后，点击Update preview（更新预览）可在右侧查看效果；确认无误后，点击Export（导出）即可生成目标文件。

三、数据准备

数据准备是保证网页地图效果的关键，要点如下：

1. 图层整理：仅保留并开启需要导出的图层，删除或关闭无用图层；同时为图层命名时尽量清晰易懂，便于后续管理与展示；也可设置图层组，网页地图将同步以组的形成展示。
2. 字段整理：可给字段设置清晰的别名，插件会优先显示别名作为字段名称；隐藏或删除列表、JSON 对象等复杂字段类型（此类字段可能导致图层加载失败），在字段属性的空间类型中选择隐藏，即可隐藏该字段。
3. 矢

   量样式设置：插件对复杂样式支持有限，支持的样式包括：
• 单一符号；
• 分类符号；
• 渐变符号；
• SVG标记：点图层可使用SVG图标，支持自定义大小、填充色、边框色；
4. 标签美化：支持字体大小、颜色、字重（粗体/斜体）、描边等属性设置；
5. 附

   件字段处理（支持图像、音频、视频类附件）：

   relation_aggregate(  '途经点图片附件',  -- 关系名称  'concatenate',      -- 聚合方式  '<p><img src="'|| @project_folder || '/' || "图片相对路径" || '" width="40" height="40" ></p>',  -- 图片HTML格式  '',                 -- 筛选条件（留空即可）  ''                  -- 分隔符（留空，依赖HTML换行）)

• 一对一图像附件：将字段控件类型设为附件，字段值填写附件文件路径（插件会自动复制附件到导出文件夹，可随其他文件一同打包迁移）；
• 一对多图像附件：通过字段计算器写入包含图片路径的 HTML 代码（路径文本不可包含空格），示例代码如下。需注意，示例中图片地址为本地文件夹路径，若部署到服务器或 GitHub 会失效；实际应用中，可借助阿里云 OSS 等图床工具管理附件图片。

四、导出设置

完成数据准备后，打开qgis2web插件配置对话框，按以下步骤依次完成各项参数配置，即可生成符合需求的网页地图：

1. 选择web框架

在插件左侧下方的格式选择区，根据自身需求从OpenLayersLeaflet中选一种作为网页地图的框架。

2. 图层与组设置

在Layers and Groups标签页，完成图层相关交互与显示配置（以下配置可通过Set All 选项栏中批量设置）：

• Visible（可见性）：勾选后，该图层在网页地图初始加载时默认显示（仅控制初始可见状态，不影响图层本身加载）；
• Popups
  （弹窗）：勾选后，点击图层要素可弹出属性信息弹窗，其中Popup fields用于设置字段显示形式，可选6种类型：
• no label：仅显示字段数据，不展示字段名称；
• inline label - always visible：字段名称与数据同行显示，始终展示；
• inline label - visible with data：仅当字段有数据时，字段名称与数据同行显示；
• hidden：始终隐藏该字段的弹窗信息；
• header label - always visible：字段名称作为标题显示在数据上方，始终展示；
• header label - visible with data：仅当字段有数据时，字段名称作为标题显示在数据上方；
• Cluster（聚类）：可自动对密集点要素聚类，避免页面要素重叠；
• Basemap（底图）：勾选后，该图层将作为底图，以单选按钮形式支持底图切换；
• Collapsed if LayersList（图层列表折叠）：勾选后，图层列表默认处于折叠状态；
• Encode to JSON（JSON编码）：勾选后将WFS图层转为本地GeoJSON格式，提升网页地图加载速度。

3. 外观定制

切换至Appearance（外观）标签页，可对网页地图的基础信息、交互功能、样式及缩放范围进行个性化定制：

基础信息

• Title（标题）：默认显示 QGIS 工程的项目标题，可选择隐藏，或设置在左上角 / 左下角 / 右上角 / 右下角任一位置；
• Abstract（摘要）：显示QGIS工程中设置的项目摘要，显示位置与标题一致，支持单独设置显示状态。

交互工具

• Layers list（图层列表）：控制图层列表的显示状态，可选隐藏/折叠显示/展开显示；
• Geolocate user（用户定位）：勾选后，网页地图将显示用户当前地理位置；
• Measure tool（测量工具）：启用后支持地图测量功能，支持选择公制/英制测量单位；
• Address search（地址搜索）：启用后支持地理编码地址搜索定位功能；
• Layer search（图层搜索）：选择指定字段后，可检索图层内该字段的内容并定位要素。

交互效果

• Show popups on hover：鼠标悬浮在图层要素上时，自动显示属性弹窗；
• Highlight on hover：鼠标悬浮在图层要素上时，要素自动高亮显示。

样式定制

• Template（HTML模板）：选择网页地图的基础HTML模板，也可将自定义模板添加至QGIS3配置文件文件夹的/qgis2web/templates目录下，实现个性化模板使用；
• Widget Icon（控件图标色）：设置网页地图各类功能控件图标的主色调；
• Widget Background（控件背景色）：设置网页地图各类功能控件的背景颜色。

范围与缩放

• Match project CRS（匹配项目坐标系）：勾选后，网页地图将沿用QGIS项目的坐标系；未勾选则默认使用EPSG:3857坐标系；
• Restrict to extent（范围限制）：勾选后，网页地图将被限制在指定范围内，防止平移或缩放超出该范围；
• Extent（限定范围）：配合范围限制功能使用，可选当前QGIS视图范围/所有图层内容范围；
• Max zoom level（最大缩放级别）：设置网页地图的最大缩放比例，可选范围1~28；
• Min zoom level（最小缩放级别）：设置网页地图的最小缩放比例，可选范围1~28。

4. 导出配置优化

切换至Export标签页，可对导出方式和数据进行优化：

• Exporter（导出方式）：可选Export to folder（导出至本地文件夹）或Export to FTP site（直接上传至FTP服务器）；选择本地导出时，点击「...」可自定义文件保存文件夹；
• 数

  据优化：
• Minify GeoJSON files：勾选后自动压缩GeoJSON文件，有效减小文件体积；
• Precision（几何精度）：设置地图要素的几何精度（1 为最简化，15 为最高精度）；多边形要素建议设为 4，平衡显示效果与文件体积。

5. 导出并预览

所有参数配置完成后，点击插件对话框底部的Export按钮，等待插件完成文件导出即可。导出成功后将自动打开网页地图预览；也可双击导出文件夹中的「index.html」文件，在本地浏览器中预览效果；确认地图显示、交互均无问题后，即可准备后续部署操作。

五、静态网页部署（GitHub）

将导出文件夹内的所有文件上传至 GitHub 仓库，开启 GitHub Pages 静态网站功能，即可实现网页地图的在线浏览，具体步骤如下：

1. 新建GitHub公共仓库，将导出的所有文件上传至仓库根目录；
2. 在根目录下新建名为 .nojekyll 的空文件（GitHub Pages 默认启用的 Jekyll 构建工具会忽略下划线相关文件，新建该文件可禁用 Jekyll）；

   

3. 进入仓库Settings→Pages；在Branch中选择main分支，点击Save；

   

4. 等待几分钟后，即可通过页面显示的链接访问网页地图。