跳至主要內容

架构总览

大约 7 分钟

架构总览

本节深入介绍 vjmapext 的系统分层、组件关系、数据流与渲染机制，帮助你理解底层运作原理，为进阶开发打下基础。

系统分层

vjmapext 采用经典的分层架构，从上到下分为应用层、核心层和基础层：

设计原则

MapCadLayer 是整个系统的中枢入口，但它不实现具体业务逻辑，而是将职责委托给各个子系统。子系统之间通过 EventBus 解耦通信，通过 CoordMapper 统一坐标转换。

组件关系

以下类图展示了 MapCadLayer 与其 readonly 成员的关系：

数据流

从实体创建到最终在地图上渲染，数据经历以下完整流程：

三数据源分桶策略

渲染管线将实体对应的 GeoJSON Feature 分配到三个 map source 中，以优化渲染性能：

数据源Source ID用途更新频率
Hotmapcad-hot选中 / 高亮的实体 + 夹点 + 预览高频（交互时每帧更新）
Coldmapcad-cold普通静态实体低频（仅实体变更时更新）
Dynamicmapcad-dynamicdynamic: true 的实体（如动画对象）中频（动画帧更新）

性能优化

这种分桶策略确保大量静态实体（Cold Source）不会因为少量交互操作（Hot Source）而被反复序列化。RenderCache 进一步缓存每个实体的 GeoJSON 输出，仅在实体属性变更时重新计算。对于仅样式变化的实体（如颜色修改），采用就地属性补丁而不是重建整个 Feature 数组。

命令执行流程

以下时序图展示了用户执行一条绘图命令的完整生命周期：

命令上下文 CommandContext

每条命令执行时会收到一个 CommandContext，其中包含 store、inputManager、eventBus、coordMapper、renderPipeline、previewManager、gripManager、drawingDefaults、undoManager、blocks、map、dimReactorManager 等引用，可以访问系统的全部能力。

事件系统

EventBus 是系统内部的发布/订阅中心，所有子系统通过它进行解耦通信。支持的核心事件：

事件类别事件名触发时机
实体事件entity:added实体添加到 EntityStore
entity:deleted实体从 EntityStore 删除
entity:modified实体属性发生变更
entity:mouseenter鼠标移入实体
entity:mouseleave鼠标移出实体
entity:click点击实体
entity:dblclick双击实体
选择事件selection:changed选中实体集合变化
命令事件command:started命令开始执行
command:ended命令执行结束
模式事件mode:changed编辑/浏览模式切换
渲染事件render:requested请求渲染更新
存储事件store:changedEntityStore 数据变化
输入事件input:started开始用户输入
input:ended用户输入结束
框选事件boxselect:started开始框选操作
boxselect:ended框选操作结束
// 监听实体添加事件
mapcadLayer.eventBus.on('entity:added', (e) => {
  console.log('新增实体:', e.entity.id, e.entity.type);
});

// 监听选择变化
mapcadLayer.eventBus.on('selection:changed', (e) => {
  console.log('当前选中:', e.selectedIds);
});

// 监听模式切换
mapcadLayer.eventBus.on('mode:changed', (e) => {
  console.log('模式切换为:', e.mode);
});

渲染管线详解

RenderPipeline 采用 增量更新 + 全量重建 双模式，在性能与正确性之间取得平衡：

全量重建

在以下场景中触发：

  • 首次渲染 / forceFullRender() 调用
  • 坐标映射器重新绑定（地图投影变化）
  • 浏览模式下的显示层级过滤变化

全量重建时，RenderPipeline 遍历 EntityStore 中所有可见实体，调用 RenderCache.getOrCompute() 获取缓存的 GeoJSON Feature，然后按实体状态（选中、动态、普通）分配到对应数据源。

增量更新

常规编辑操作（添加、删除、修改实体）触发增量更新，仅处理变化的实体：

  1. 样式补丁：颜色、透明度等样式属性变化时，直接修改已有 Feature 的 properties，不重建数组
  2. Feature 替换：几何形状变化时，从对应桶中移除旧 Feature，生成新 Feature 并追加
  3. 索引维护：_entityIndex 记录每个实体在哪个桶的哪个位置，支持高效定位

注意

RenderPipeline.render() 由 EntityStore 的脏标记自动触发，通常不需要手动调用。如需强制刷新（如外部修改了实体几何数据），请调用 renderPipeline.forceFullRender()。

坐标系统

CoordMapper 负责 CAD 坐标与地图经纬度之间的双向转换：

CoordMapper 在 onAdd() 时通过 bindMap() 绑定到 vjmap.Map，自动获取当前的 GeoProjection 投影参数。所有实体的坐标都使用 CAD 坐标系，渲染时由 CoordMapper 自动转换为经纬度坐标写入 GeoJSON。

下一步