零代码QGIS地图转网页,10分钟快速上手qgis2web插件【附演示项目在线访问地址】
- 2026-09-26 08:49:10
qgis2web 是 QGIS的爆款插件。它能够将 QGIS 工程内的图层、样式、标注完整复刻为可交互式网页地图，其生成的纯HTML+JS文件无需编写代码，既可直接本地打开预览，也能灵活部署至 Web 服务器或 GitHub 平台；同时支持图像、音频、视频等附件同步导出，操作门槛极低，非常适用于项目展示、成果交付、教学培训等场景。
此前，我们曾借助 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（导出）即可生成目标文件。
三、数据准备
数据准备是保证网页地图效果的关键，要点如下：
图层整理：仅保留并开启需要导出的图层，删除或关闭无用图层；同时为图层命名时尽量清晰易懂，便于后续管理与展示；也可设置图层组，网页地图将同步以组的形成展示。 字段整理：可给字段设置清晰的别名，插件会优先显示别名作为字段名称；隐藏或删除列表、JSON 对象等复杂字段类型（此类字段可能导致图层加载失败），在字段属性的空间类型中选择 隐藏，即可隐藏该字段。矢 量样式设置：插件对复杂样式支持有限，支持的样式包括： 单一符号； 分类符号； 渐变符号； SVG标记：点图层可使用SVG图标，支持自定义大小、填充色、边框色； 标签美化：支持字体大小、颜色、字重（粗体/斜体）、描边等属性设置； 附 件字段处理（支持图像、音频、视频类附件）： 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 静态网站功能，即可实现网页地图的在线浏览，具体步骤如下：
新建GitHub公共仓库，将导出的所有文件上传至仓库根目录； 在根目录下新建名为 .nojekyll的空文件（GitHub Pages 默认启用的 Jekyll 构建工具会忽略下划线相关文件，新建该文件可禁用 Jekyll）；
创建.nojekyll空文件 进入仓库 Settings→Pages；在Branch中选择main分支，点击Save；
配置静态页面 等待几分钟后，即可通过页面显示的链接访问网页地图。
