非遗电子地图怎么做?WebGIS展示如何搞?

wowwwai GIS研习社 · 工具流程与项目排障

引言

“非遗电子地图怎么做?WebGIS展示如何搞?”这个问题，通常不是单纯把几个点标到地图上，而是要把非遗项目、传承人、保护单位、图片视频、行政区划和检索筛选能力组织成一个可访问、可维护、可发布的 WebGIS 应用。

对 GIS 学生、基层文化馆工作人员、WebGIS 开发者来说，非遗电子地图的核心目标有三个：位置要准、属性要清楚、展示要好用。本文以一个“非遗项目点位展示系统”为例，讲清楚从数据整理、坐标处理、地图服务到前端展示的完整流程。

背景

非遗电子地图常见于文化资源普查、文旅展示平台、地方非遗名录发布、研学线路设计等场景。它和普通 POI 地图不同，除了经纬度点位，还需要表达非遗类别、级别、批次、传承人、保护单位、文字介绍、图片、视频链接和行政区归属。

很多项目失败不是因为地图框架难，而是因为前期数据没有整理好。例如 Excel 表里只有“某某镇”“某某村”，没有经纬度；项目名称写法不统一；图片文件路径混乱；坐标系混用；公开展示时还泄露了不该公开的个人信息。

因此，做非遗电子地图时，建议先把问题限定为一个清晰目标：在网页地图上展示非遗项目点位，并支持分类筛选、点击弹窗查看详情、按区域浏览和基础搜索。这样既适合教学，也适合小型项目落地。

原理

非遗电子地图的本质，是把非遗属性表转换为空间数据，再通过 WebGIS 前端库加载和渲染。常用数据格式包括 Shapefile、GeoPackage、GeoJSON 和 PostGIS 数据库表。

如果数据量不大，例如几十到几千个非遗项目点，可以直接使用 GeoJSON 配合 Leaflet 或 OpenLayers 展示。如果数据量较大，或者需要后台编辑、权限管理、空间查询，则建议使用 PostGIS 存储，再通过 GeoServer、MapServer 或自建 API 发布服务。

坐标系是必须先处理的问题。网页底图通常使用 Web Mercator 投影，常见 EPSG 代码为 EPSG:3857；而 GPS 采集到的经纬度通常是 WGS84，EPSG 代码为 EPSG:4326。对于 GeoJSON 点位数据，前端地图一般希望接收经纬度坐标，即经度在前、纬度在后。

一个典型的非遗 WebGIS 展示链路如下：

• 非遗项目表：整理项目名称、类别、级别、地址、简介、图片、经纬度。
• GIS 数据处理：在 QGIS 中检查坐标、纠正错误点、导出 GeoJSON。
• 前端地图展示：用 Leaflet 或 OpenLayers 加载底图和 GeoJSON。
• 交互功能：实现分类筛选、点击弹窗、搜索定位和图层控制。
• 发布部署：将网页、数据和图片部署到服务器或 WordPress 页面中。

步骤

步骤一：设计非遗电子地图字段

先不要急着写代码，建议先设计一张标准化的非遗项目表。字段越规范，后续 WebGIS 展示越轻松。

字段命名尽量使用英文小写，避免空格和特殊符号。这样在 Leaflet、OpenLayers、GeoPandas 或数据库中处理时更稳定。

步骤二：补齐经纬度并检查位置

如果已有 GPS 采集坐标，可以直接导入 QGIS 检查。如果只有地址，需要先做地理编码，也就是把文字地址转换为经纬度。地理编码可以使用政务数据平台、地图 API、人工核查或实地采集方式完成。

在 QGIS 中检查点位的基本流程是：

1. 将 Excel 或 CSV 表格另存为 UTF-8 编码的 CSV 文件。
2. 在 QGIS 中选择“添加分隔文本图层”。
3. 指定 X 字段为 lon，Y 字段为 lat。
4. 坐标参考系选择 EPSG:4326。
5. 叠加行政区划或在线底图，检查点是否落在正确地区。
6. 对明显偏移、落海、经纬度颠倒的点进行修正。

非遗电子地图最怕“看起来能显示，但位置其实错了”。发布前至少要抽查每个县区、每种类别和每个级别的样本点。

步骤三：在 QGIS 中导出 GeoJSON

对于轻量级 WebGIS展示，GeoJSON 是最方便的数据格式。它可以直接被 Leaflet 和 OpenLayers 加载，也便于人工查看和版本管理。

在 QGIS 中导出 GeoJSON 的操作如下：

1. 右键非遗点图层，选择“导出”。
2. 选择“另存为”。
3. 格式选择 GeoJSON。
4. 坐标参考系选择 EPSG:4326。
5. 文件编码选择 UTF-8。
6. 确认字段名称和中文内容没有乱码。

导出后可以用文本编辑器打开 GeoJSON，检查是否包含 FeatureCollection、features、geometry 和 properties。其中 geometry 存储空间位置，properties 存储非遗项目属性。

步骤四：用 Leaflet 搭建非遗 WebGIS 展示页面

如果项目目标是快速实现非遗电子地图，Leaflet 是很合适的选择。它轻量、易学，适合点位展示、弹窗、图层控制和简单交互。

下面是一个最小可运行思路，假设你的非遗数据文件为 feiyi.geojson：

<div id="map" style="height:600px;"></div>

<script>
var map = L.map('map').setView([23.12, 113.12], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(map);

fetch('/data/feiyi.geojson')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    L.geoJSON(data, {
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 7,
          color: '#b33',
          weight: 1,
          fillColor: '#e55',
          fillOpacity: 0.8
        });
      },
      onEachFeature: function(feature, layer) {
        var p = feature.properties;
        var html = '<strong>' + p.name + '</strong><br>' +
                   '类别：' + p.category + '<br>' +
                   '级别：' + p.level + '<br>' +
                   '地址：' + p.address + '<br>' +
                   p.intro;
        layer.bindPopup(html);
      }
    }).addTo(map);
  });
</script>

这个示例完成了三个关键动作：加载底图、加载非遗 GeoJSON、点击点位弹出详情。实际项目中可以继续扩展分类筛选、搜索框、图例、图片展示和详情页跳转。

步骤五：实现分类筛选和分级展示

非遗 WebGIS 展示不能只堆点。用户通常会按“传统技艺、传统美术、民俗、传统音乐”等类别查看，也会按国家级、省级、市级、县级进行筛选。

实现思路是把所有 GeoJSON 点位先读入内存，然后根据字段条件重新渲染图层。例如筛选 category 字段，或者筛选 level 字段。前端按钮、下拉框和复选框都可以作为筛选入口。

颜色设计建议保持简单：

• 按非遗类别配色，适合文化主题展示。
• 按保护级别配色，适合管理和统计展示。
• 同一张地图不要同时用太多颜色和符号，否则读图困难。

步骤六：图片、视频和详情页怎么组织

非遗电子地图往往需要图文展示。建议不要把大段图片直接塞进 GeoJSON。更稳妥的做法是：GeoJSON 中只保存图片路径、视频链接或详情页 URL，真正的媒体文件放在服务器或 WordPress 媒体库中。

例如属性字段可以这样设计：

{
  "name": "某地剪纸",
  "category": "传统美术",
  "level": "省级",
  "image": "/wp-content/uploads/feiyi/001.jpg",
  "detail_url": "/feiyi/001.html"
}

弹窗里展示缩略图和简短简介，详情页再展示完整图文、视频、传承谱系和保护情况。这样地图加载更快，内容维护也更清晰。

常见坑

坑一：经纬度顺序写反

GeoJSON 坐标数组的顺序是经度、纬度，即 [lon, lat]。但 Leaflet 的 setView 通常写作纬度、经度，即 [lat, lon]。这两个地方很容易混淆。

如果点位突然跑到国外、海上或地图不可见，优先检查经纬度顺序。

坑二：坐标系混用导致位置偏移

非遗项目坐标可能来自 GPS、在线地图拾取、测绘成果或人工录入。不同来源可能使用不同坐标体系。发布前应在 QGIS 中统一检查，尽量明确数据采用 WGS84 经纬度。

如果使用国内互联网地图底图，还可能遇到底图坐标偏移问题。涉及正式项目时，应根据数据来源、底图来源和合规要求统一处理。

坑三：GeoJSON 文件太大导致 WebGIS 加载慢

如果 GeoJSON 包含大量长文本、高清图片 Base64 或复杂面要素，网页加载会明显变慢。非遗电子地图一般以点位为主，建议只保留展示必要字段。

• 删除无用字段，例如临时编号、内部备注、重复地址。
• 图片不要转成 Base64 放进 GeoJSON。
• 大数据量场景改用矢量瓦片、聚合点或后端接口分页加载。

坑四：弹窗内容没有做安全处理

如果属性内容来自后台录入，前端直接拼接 HTML 可能带来脚本注入风险。正式系统应对文本进行转义处理，图片和链接也要限制来源。

坑五：只做展示，不做更新机制

非遗名录会新增、调整和更正。如果每次更新都要人工修改代码，后期维护成本会很高。建议至少保留一份标准 CSV、GeoPackage 或 PostGIS 数据源，让地图数据可以重复导出和更新。

方法比较

非遗电子地图可以有多种实现路线，选择哪种方案取决于数据量、团队能力、预算和维护需求。

如果你是第一次做非遗电子地图，建议从“QGIS 整理数据 + GeoJSON + Leaflet 展示”开始。这个方案能覆盖大多数教学、展示和轻量项目需求。

检查清单

发布非遗 WebGIS 展示页面前，建议按下面清单逐项检查。

• 数据完整性：项目名称、类别、级别、地址、经纬度是否齐全。
• 字段规范：字段名是否统一，是否避免空格、中文括号和特殊字符。
• 坐标正确性：点位是否落在正确行政区，是否存在经纬度颠倒。
• 编码检查：CSV、GeoJSON、网页是否使用 UTF-8，中文是否乱码。
• 弹窗内容：名称、类别、级别、图片、详情链接是否正常显示。
• 筛选功能：分类筛选、级别筛选是否能正确刷新地图。
• 移动端适配：手机上是否能正常缩放、点击点位和查看弹窗。
• 加载性能：GeoJSON 是否过大，图片是否压缩，地图首次加载是否流畅。
• 公开合规：传承人个人信息、联系方式、精确住址是否适合公开。
• 更新流程：是否保留原始表格和导出步骤，后期能否重复生成数据。

FAQ

非遗电子地图一定要用 WebGIS 吗？

不一定。如果只是做论文插图、报告附图或宣传海报，用 QGIS 制作静态专题图就够了。如果需要用户在网页上点击、搜索、筛选和查看详情，就应该使用 WebGIS 展示。

没有经纬度，只有地址，能做非遗地图吗？

可以，但需要先做地理编码。你可以通过地图平台、政务地名数据、人工采点或实地 GPS 采集获得经纬度。地理编码后的结果必须人工抽查，不能直接发布。

非遗 WebGIS 展示用 Leaflet 还是 OpenLayers？

如果是点位展示、弹窗和简单筛选，Leaflet 更容易上手。如果需要复杂图层控制、投影处理、工程化地图功能，OpenLayers 更合适。对初学者来说，Leaflet 是较好的起步方案。

GeoJSON 可以直接放在 WordPress 里吗？

可以，但要注意文件路径、跨域访问和安全设置。小数据量可以把 GeoJSON 放在主题目录、插件目录或上传目录中，再由前端脚本读取。正式项目建议规划清晰的数据目录和更新流程。

非遗电子地图需要数据库吗？

小型展示不一定需要数据库。几十到几千个点位可以用 GeoJSON。若需要后台录入、多用户审核、空间查询、版本管理和长期维护，则建议使用 PostGIS 或其他数据库方案。

为什么我的点在 QGIS 里正常，网页地图上位置不对？

常见原因包括经纬度顺序写反、导出坐标系不是 EPSG:4326、前端解析字段错误、底图坐标体系不一致。建议先用 QGIS 导出标准 GeoJSON，再用浏览器开发者工具检查坐标数组。

结论

非遗电子地图的关键不在于炫酷效果，而在于数据规范、坐标准确、交互清晰和后期可维护。一个可靠的非遗 WebGIS 展示流程，应从标准字段表开始，在 QGIS 中完成坐标检查和 GeoJSON 导出，再用 Leaflet 或 OpenLayers 实现网页展示。

如果你刚开始实践，建议先完成最小版本：非遗点位上图、点击弹窗、分类筛选、图片链接和移动端可访问。等数据和需求稳定后，再升级到 PostGIS、GeoServer、后台管理和更复杂的专题分析功能。