# 排水 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](https://maplibre.org/maplibre-style-spec/)、[MapLibre feature-state expressions](https://maplibre.org/maplibre-style-spec/expressions/)、[ArcGIS Color Schemes](https://pro.arcgis.com/en/pro-app/3.6/help/mapping/layer-properties/work-with-color-schemes.htm)、[ColorBrewer](https://colorbrewer2.org/)、[CARTOColors](https://carto.com/carto-colors/index.html) 与 [WCAG 1.4.11](https://www.w3.org/WAI/WCAG21/understanding/non-text-contrast.html)。