64 lines
4.7 KiB
Markdown
64 lines
4.7 KiB
Markdown
# 排水 WebGIS 地图设计规范
|
||
|
||
## 设计原则
|
||
|
||
地图采用克制的浅色工程制图语言，阅读顺序是资产身份、业务状态、交互状态。颜色不单独承担分类，线型、点型、描边和填充共同构成几何签名。
|
||
|
||
低缩放优先呈现连续网络拓扑，放大后逐步恢复设施细节。默认浅色底图是完整质量基准，影像底图依靠白色 casing 保证基本可读，不维护第二套主题。
|
||
|
||
## 颜色系统
|
||
|
||
运行时唯一来源是 `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)。
|