前端通用交互式几何编辑器的开发经验

前端通用交互式几何编辑器:设计系列导读

1. 为什么写这套东西

做前端的人大多碰过"在地图上画点什么"的需求。画个点、连条线、圈一块区域,看起来不难,可真要把它做成能被业务系统集成、能被别人二次开发的编辑器,市面上能找到的工具却大多差着一口气:

  • 有的和一套界面深度绑定------编辑器长在自己的面板里,业务想换皮、想内嵌,动不了;
  • 有的只支持单一地图库------绑死 Leaflet 或 Cesium,换个场景就得重写;
  • 有的把绘制、编辑、撤销、图层树全堆在一起,改一处崩一片,越用越不敢动。

它们缺的不是功能,而是一种工程美学:让一个编辑器像库一样被信任------边界清晰、依赖单向、可组合、可替换、可长期维护。

于是有了这套 skill(geometry-interactive-editor)和这一系列文章。

github.com/maanfa/skil...

它们其实在做两件事:

  1. 提出适用场景:交互式几何编辑器不止"地图"------二维画布、三维场景、任意 canvas 几何编辑,都是它的舞台;它应当能跨库、无 UI、纯指令式地存在;
  2. 总结经验教训:这是我多年开发编辑功能踩坑、重构、被"集成需求"逼出来的设计取舍。如果能帮到读者和广大相关从业者少走弯路,那是对我的一种荣耀。

系列里没有玄学,只有"为什么这么分、什么时候可以不做"。

2. 整体设计一览

先看一张"总图",后续每篇都是对它的展开:

读图要点:

  • 虚线框 = 本设计交付的"可复用库"边界:宿主(上方)与地图库(下方)都在框外,库对它们只有两处接口------对外事件 / 指令式 API,以及坐标契约 / 渲染适配;
  • 外观类 Facade 是唯一入口:宿主只面对它;它装配一组控制器,其中热键、光标可选;
  • 绘制器 / 变更器通过策略模式组合能力 ,Element 经 Hoverable / Editable 标记获得"可悬停 / 可编辑"能力(图中未展开,见第 3、4 篇);
  • 适配器在最外层:实现坐标换算,把 core 翻译成具体地图库的渲染------这就是"库无关"的边界所在。

3. 两个经典流程

先剧透两个"最小闭环",感受一下宿主与库的交互长什么样(完整版见第 4、5 篇)。

画一个多边形:

sequenceDiagram actor U as 用户 participant F as Facade(外观类) participant D as Drawer(绘制器) participant A as MapAdapter(地图库适配器) U->>F: startDraw('polygon') loop 每点一个顶点 U->>D: leftdown(经鼠标管家) D->>D: 策略追加顶点 end U->>D: doubleclick 完成 D-->>F: draw:finished F->>A: updateElement(增量渲染)

拖一个顶点:

sequenceDiagram actor U as 用户 participant F as Facade(外观类) participant M as Modifier(变更器) participant A as MapAdapter(地图库适配器) U->>F: select(id) + startEdit(id) F->>M: 创建顶点手柄 U->>M: 拖拽手柄 M-->>F: edit:vertex-dragged F->>A: updateElement(增量渲染)

两处共有的味道:宿主只碰 Facade,绘制 / 编辑逻辑不直接碰地图库,渲染一律经适配器。

4. 系列篇目

5. 阅读顺序

1 → 2 → 3 → 4 → 5 → 6 → 7。每篇独立可读,但后者会引用前者的概念;每篇末尾附"何时该用 / 何时不必"------因为好的设计,也懂得在不需要的地方停手。

6. 图例约定

文中图均为 mermaid:

  • flowchart:流程 / 数据流
  • sequenceDiagram:时序
  • stateDiagram:状态机

愿这套东西,能让某个深夜还在为"编辑器怎么被集成"发愁的同行,少一点纠结。

相关推荐
锋行天下5 分钟前
DeepSeek写Langgraph就是个大傻逼,一本正经胡说八道
前端·人工智能·后端
jktantan21 分钟前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
阿俊-全栈开发36 分钟前
LikeShop 多商户 Java 版商城微服务模块拆分与部署架构演进实践
java·微服务·架构·likeshop开源商城·多商户源码
计算机魔术师43 分钟前
Anthropic官方插件被「寄生」,背后是同一类攻击又来了
前端
我命由我123451 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
key_3_feng1 小时前
评估与对齐:Agent 自我进化的护栏
前端·数据库·agent
X54先生(人文科技)2 小时前
百度智能对 X54 先生学科底色评估
人工智能·深度学习·百度·架构
LaughingZhu2 小时前
Product Hunt 热榜 2026-10-30:Empacer、Scape、Floot in ChatGPT
java·前端·数据库·人工智能·chatgpt·notion
HelloWorld0012 小时前
拒绝被大模型算力绑架!基于语义复杂度与意图分流打造多模型混合动态路由网关(全套架构+实战)
架构
Lank_M2 小时前
抠图结果缩放后边缘发脏,该怪的不是插值
前端