4.7 KiB
排水 WebGIS 地图设计规范
设计原则
地图采用克制的浅色工程制图语言，阅读顺序是资产身份、业务状态、交互状态。颜色不单独承担分类，线型、点型、描边和填充共同构成几何签名。
低缩放优先呈现连续网络拓扑，放大后逐步恢复设施细节。默认浅色底图是完整质量基准，影像底图依靠白色 casing 保证基本可读，不维护第二套主题。
颜色系统
运行时唯一来源是 src/features/workbench/map/map-colors.ts 的 MAP_STYLE_TOKENS。业务图层、模拟、工具、图例和测试不得建立平行颜色常量。
| Token | HEX | OKLCH | 用途 |
|---|---|---|---|
asset.conduit |
#0F766E |
oklch(51.1% 0.086 186.4) |
管渠 |
asset.junction |
#0369A1 |
oklch(50.0% 0.119 242.7) |
检查井 |
asset.orifice |
#475569 |
oklch(44.6% 0.037 257.3) |
孔口 |
asset.pump |
#155E75 |
oklch(45.0% 0.077 224.3) |
泵 |
asset.outfall |
#334155 |
oklch(37.2% 0.039 257.3) |
排放口 |
state.selected |
#2563EB |
oklch(54.6% 0.215 262.9) |
所有选中态 |
state.inactive |
#64748B |
oklch(55.4% 0.041 257.4) |
Closed、Off、Inactive |
state.risk |
#C2410C |
oklch(55.3% 0.174 38.4) |
风险与预警 |
state.incident |
#B91C1C |
oklch(50.5% 0.190 27.5) |
事故与爆管 |
state.success |
#15803D |
oklch(52.7% 0.137 150.1) |
改善与成功 |
state.agent |
#6D28D9 |
oklch(49.1% 0.241 292.6) |
Agent 推断 |
tool.geometry |
#334155 |
oklch(37.2% 0.039 257.3) |
绘制与测量 |
红色只表示事故，橙色只表示风险，绿色只表示成功，紫色只表示 Agent 推断。普通 core opacity 为 0.9，关键轮廓和 selected 为 1，面填充限定在 0.10 至 0.18。
资产与缩放配方
| 资产 | 几何签名 | 缩放行为 |
|---|---|---|
| 管渠 | 白色 casing、青绿色实体 core，管径驱动高缩放线宽 | z9–z13 core 1.1→2px，casing 1.7→2.8px；z17 起叠加管径 |
| 检查井 | 蓝色实心圆、白色 halo | z12–z14 仅 0.6→1px 弱化小点；halo opacity 为 0；z14–z15 渐显；z15 后恢复完整点型 |
| 孔口 | 白色 casing、板岩色虚线 | z11 起显示，dash 为 [4, 2]，避免低缩放退化为点阵 |
| 泵 | 白色 casing、深青色点划线 | z11 起显示，dash 为 [6, 2, 1.5, 2] |
| 排放口 | 白色中心、深板岩色圆环 | z11 起显示，随缩放增大 |
Closed、Off、Inactive 只把 core 改为 inactive 灰，不改变几何身份。禁止用 glow 表示口径、流量或其他连续量。
状态与图层顺序
状态优先级是 selected > hover > status > source。常规业务 vector source 使用 promoteId: "id"，SCADA source 使用 promoteId: "scada_id"，hover 与 selected 通过 feature-state 控制，opacity 使用 120ms 过渡且不脉冲。
- hover：白色增宽 casing 加 source/status core，selected 时 opacity 为 0。
- selected：保留普通 core，外侧使用白色分隔、操作蓝外框和窄白外缘。
- 模拟：风险范围使用 risk 橙 14% 填充和虚线边界，爆管使用 incident 红。
- 工具：绘制与测量主体使用中性 tool 色，活动顶点和选中几何使用操作蓝。
- Agent：推断标注只使用 agent 紫。
绘制顺序固定为底图、模拟填充、业务源、模拟事故和边界、绘制与测量、hover、selected、标签、hit layers。动态工具图层插入 WORKBENCH_INTERACTION_BEFORE_ID 之前。
禁用规则与验收
- 禁止在图层或图例中散落业务 HEX，禁止建立 token 的 source/selected/opacity 镜像常量。
- 禁止多层半透明同色叠加模拟 selected，禁止用白色 halo 切断低缩放管网。
- 关键图形在三个浅色背景上合成后至少达到 3:1，selected 蓝至少达到 4.5:1。
- z11.7、z13、z15、z20 检查连续性和设施渐显；Light、Satellite 和无底图均需辨认资产。
- 检查线与点的 hover、selected、交叉遮挡、状态清理、模拟、绘制、测量、图例和导出 PNG。
- 在 1440×900 与 375px 检查地图可读性和控件遮挡，并用 protanopia、deuteranopia 模拟确认几何签名仍可区分 source。
设计依据：MapLibre Style Specification、MapLibre feature-state expressions、ArcGIS Color Schemes、ColorBrewer、CARTOColors 与 WCAG 1.4.11。