前言
做 SLAM 的同学一定不陌生：建图完成后，生成的 PGM 地图往往需要手动修修补补------擦除噪点、补充缺失的障碍物、标注关键区域......然而传统做法要么用 Photoshop 等笨重工具，要么自己写脚本，效率低下。
最近发现了一个开源在线工具 pgmXT，专门解决这个问题。无需安装，打开浏览器就能编辑 PGM 地图。使用了一段时间，觉得非常实用，在此分享给大家。
在线地址：https://editpgm.top（免安装，打开即用）
为什么需要它？
先说说常见的痛点：
- PGM 格式特殊 --- 普通图片编辑器不支持灰度位图格式
- SLAM 地图需要精准编辑 --- 不是画画，是要修障碍物边界
- 跨平台麻烦 --- 在不同电脑上工作要重复搭建环境
- 协作困难 --- 地图文件传来传去，版本管理混乱
pgmXT 就是针对这些问题设计的。
功能介绍
📐 多种绘图工具
工具齐全，覆盖了日常编辑的绝大部分场景：
| 工具 | 快捷键 | 用途 |
|---|---|---|
| 移动 | 1 |
选择和移动已绘制的元素 |
| 画笔 | 2 |
自由绘制，填补障碍物 |
| 直线 | 3 |
绘制直线，适合标注墙壁 |
| 橡皮擦 | 4 |
擦除不需要的噪点 |
| 矩形 | 5 |
标注区域或填补矩形障碍物 |
| 圆形 | 6 |
标注圆形区域 |
| 文字 | 7 |
添加文字标注 |
🔄 编辑辅助
- 撤销 / 重做 （
Ctrl+Z/Ctrl+Y） - 滚轮缩放 （
Ctrl + 滚轮）和平移 - 删除选中元素 （
Delete） - 一键适应屏幕
- 鼠标坐标实时显示（方便精确定位）
📤 导出
支持导出为 PNG 和 PGM 两种格式，导出的 PGM 文件可以直接对接 SLAM 工作流，替换原有地图使用。
实际操作流程
打开 https://editpgm.top，点击「开始使用」进入项目列表。
第一步：创建一个新项目
- 点击「新建项目」
- 上传
.pgm地图文件和对应的.yaml配置文件 - 系统自动解析 YAML 参数中的分辨率、原点坐标等信息，创建项目
第二步：编辑地图
- 用画笔工具填补缺失的障碍物
- 用橡皮擦擦除地图上的噪点
- 用矩形/圆形工具标注特定区域
- 随时
Ctrl+Z撤销误操作 - 工具栏右侧的滑块可以调节画笔/橡皮擦的粗细
第三步：导出
编辑完成后，点击导出按钮即可下载编辑后的 PGM 文件，直接替代原有地图使用。
技术架构
pgmXT 采用前后端分离架构，技术上用了一些值得关注的选型：
| 层级 | 技术 |
|---|---|
| 前端 | React + TypeScript + Vite + Fabric.js |
| 后端 | Express.js + SQLite |
| 存储 | 文件系统 + SQLite 元数据管理 |
| 部署 | Nginx 反向代理 + Let's Encrypt HTTPS |
前端的画布功能基于 fabric-with-erasing 库实现，这个库在标准 Fabric.js 的基础上增加了橡皮擦功能，正好满足了 PGM 地图擦除噪点的需求。后端则用 SQLite 存储项目元数据，轻量且无需额外配置数据库服务。
值得注意的几个特点
🌐 在线可用
这一点比较实用------不用安装 ROS、不用配置 Python 环境、不用装任何依赖，浏览器打开就能编辑。对于需要快速修改地图的场景，省去了大量环境搭建的时间。
👤 账户系统
支持注册登录，每个用户的数据完全隔离。注册用户的文件会保存 7 天，游客模式也可以直接使用，离开页面后文件自动清理。
🌍 双语支持
界面支持中文和英文，会根据浏览器语言自动切换，在导航栏也可以手动切换。
🔒 HTTPS + 隐私安全
全站启用 HTTPS，有完整的隐私政策页面，对于在意数据安全的用户可以放心使用。
适用场景盘点
- SLAM 建图后处理 --- 修图、去噪、补充障碍物
- 教学演示 --- 快速展示 SLAM 地图结构和编辑过程
- 团队协作 --- 不同成员在不同机器上编辑同一份地图
- 快速标注 --- 在地图上标记特定位置用于调试或汇报
一些小建议
目前工具还在持续更新中，有几个小期待：
- 希望能增加图层功能，方便管理不同类型的标注
- 如果能支持直接导入 ROS 的 map_server 数据包就更好了
- 期待未来能加入多人协作编辑功能
结语
pgmXT 是一个专注于 PGM 地图编辑的轻量级在线工具，它没有试图解决所有问题，而是把"编辑 PGM 地图"这个高频需求做得足够简单直接。对于经常和 SLAM 地图打交道的同学来说，值得一试。
在线体验 ：https://editpgm.top
如果你也在被 PGM 地图编辑困扰，不妨试试看。