iD-editor 详解｜OSM官方在线编辑器，基于D3.js的轻量地图编辑器
前言
上一篇我们介绍了OSM（OpenStreetMap）开放街图数据库。OSM只是一份地理数据，想要新增、修改道路、建筑、POI，就需要编辑器。iD-editor 就是OSM默认自带、新手最常用的在线编辑器，也是很多人入门矢量地图编辑、学习D3地图渲染的标杆项目。
区分：iD 只是编辑器，不存储地图数据，所有修改提交后，才会同步到OSM全球数据库。
一、iD-editor 是什么
iD 是一款纯前端、浏览器直接运行的开源OSM编辑器，由OSM官方维护。
访问入口：登录OSM官网 openstreetmap.org，点击顶部【编辑】，默认打开的就是 iD。
和桌面端 JOSM 并称为OSM两大主流编辑器：
- iD：轻量、网页版、D3+SVG、适合小范围精细编辑、新手友好
- JOSM：桌面客户端、Java开发、适合批量修改、复杂关系编辑
二、核心技术栈（GIS前端重点）
这也是很多WebGIS开发者专门研究iD的原因：
✅ 核心渲染：D3.js + SVG
D3 在 iD 里面承担这些核心工作：
- 经纬度投影转换（WGS84 → 画布屏幕坐标）
- 把OSM三大要素 Node / Way / Relation 渲染成SVG点、线、面
- 地图平移、缩放、框选、拖拽顶点、高亮交互
- 要素标签、文字标注绘制
✅ 配套技术：原生JS、模块化打包、可独立部署
iD 可以脱离OSM官网单独部署，私有化搭建自己的矢量地图编辑器，这也是很多公司二次开发它的理由。
✅ 协议：ISC开源协议，宽松友好，学习二次开发很合适
三、iD 可以做哪些操作
面向地图贡献者：
- 添加POI：便利店、公厕、充电桩、公交站牌
- 绘制、修改建筑轮廓、道路、人行道、台阶
- 补充标签tag：
wheelchair=yes、楼层、门牌号、限速 - 修正错误的道路走向、闭合面、地名
面向开发者：
- 学习"矢量要素编辑"整套交互逻辑：拖拽顶点、分割线、合并面、撤销重做
- 参考D3-SVG地图渲染方案，自研简易地图编辑器
- 私有化部署，对接自有地理数据库（改造后不提交到公网OSM）
四、iD 的优点
- 零安装，浏览器直接打开使用，不需要装客户端
- 界面简洁，自带标签提示，新手不用死记OSM的key/value规范
- 基于D3+SVG，代码结构清晰，非常适合前端学习矢量地图交互
- 官方持续维护，迭代稳定
五、iD 的局限（客观避坑）
- 大批量要素编辑性能差，一次性改上百个要素容易卡顿，批量场景优先JOSM
- 复杂Relation（复杂公交线路、带空洞多边形）编辑体验不如JOSM顺手
- 原生默认提交数据到公网OSM，私有化对接需要二次改造源码
- 国内访问OSM官网的iD经常有网络卡顿问题
六、源码获取入口
官方仓库：https://github.com/openstreetmap/iD
很多小伙伴反馈 GitHub clone / 下载源码速度很慢，这里准备备用渠道：
如果 GitHub 下载源码速度不理想，也可以关注公众号，发送
iD-editor，免费获取 v1.9.2 和 v2.38.0 版本源码。
💡版本说明：
- v1.9.2：老版本，结构简单，适合新手读源码、学习D3渲染逻辑
- v2.38.0：较新稳定版，功能完善，适合二次改造、私有化部署
七、适合哪些人阅读学习
- OSM爱好者，想要上手给开放地图贡献数据
- GIS前端，想自研矢量要素编辑器、学习D3地图交互
- 需要私有化搭建简易地图标注工具，寻找开源参考模板
小结
iD-editor 不只是一个用来改OSM地图的工具，它更是一个教科书级别的 D3+SVG矢量地图编辑项目。
- 普通使用者：拿来完善OSM地图
- 开发者：阅读源码，学习要素拾取、顶点拖拽、投影变换、地图编辑整套前端逻辑
配套文章：