feat: initialize drainage network frontend

2026-07-10 16:16:17 +08:00
commit 66de96d9e4
133 changed files with 33057 additions and 0 deletions
@@ -0,0 +1,139 @@
+import type { GeoJSONSourceSpecification, StyleSpecification } from "maplibre-gl";
+import { annotationPoints, impactAreaPolygon } from "../data/workbench-simulation";
+
+export const SIMULATION_SOURCE_IDS = {
+  impactArea: "simulation-impact-area",
+  annotations: "simulation-annotations"
+} as const;
+
+export const simulationSources = {
+  impactArea: {
+    type: "geojson",
+    data: impactAreaPolygon
+  } satisfies GeoJSONSourceSpecification,
+  annotations: {
+    type: "geojson",
+    data: annotationPoints
+  } satisfies GeoJSONSourceSpecification
+};
+
+export const simulationAnnotationLayers: StyleSpecification["layers"] = [
+  {
+    id: "simulation-impact-fill",
+    type: "fill",
+    source: SIMULATION_SOURCE_IDS.impactArea,
+    paint: {
+      "fill-color": "#ef4444",
+      "fill-opacity": 0.18
+    }
+  },
+  {
+    id: "simulation-impact-outline",
+    type: "line",
+    source: SIMULATION_SOURCE_IDS.impactArea,
+    paint: {
+      "line-color": "#ef4444",
+      "line-width": 1.5,
+      "line-dasharray": [2, 2],
+      "line-opacity": 0.72
+    }
+  },
+  {
+    id: "simulation-burst-halo",
+    type: "circle",
+    source: SIMULATION_SOURCE_IDS.annotations,
+    filter: ["==", ["get", "kind"], "burst"],
+    paint: {
+      "circle-color": "#fef2f2",
+      "circle-radius": 18,
+      "circle-stroke-color": "#ef4444",
+      "circle-stroke-width": 3,
+      "circle-opacity": 0.88
+    }
+  },
+  {
+    id: "simulation-burst-point",
+    type: "circle",
+    source: SIMULATION_SOURCE_IDS.annotations,
+    filter: ["==", ["get", "kind"], "burst"],
+    paint: {
+      "circle-color": "#ef4444",
+      "circle-radius": 7,
+      "circle-stroke-color": "#ffffff",
+      "circle-stroke-width": 3
+    }
+  },
+  {
+    id: "simulation-pipe-label",
+    type: "symbol",
+    source: SIMULATION_SOURCE_IDS.annotations,
+    filter: ["==", ["get", "kind"], "pipe-label"],
+    layout: {
+      "text-field": ["get", "label"],
+      "text-size": 13,
+      "text-font": ["Open Sans Bold"],
+      "text-allow-overlap": true
+    },
+    paint: {
+      "text-color": "#ffffff",
+      "text-halo-color": "#2563eb",
+      "text-halo-width": 9
+    }
+  },
+  {
+    id: "simulation-impact-label",
+    type: "symbol",
+    source: SIMULATION_SOURCE_IDS.annotations,
+    filter: ["==", ["get", "kind"], "tooltip"],
+    layout: {
+      "text-field": ["get", "label"],
+      "text-size": 14,
+      "text-font": ["Open Sans Bold"],
+      "text-offset": [0, 0],
+      "text-allow-overlap": true
+    },
+    paint: {
+      "text-color": "#dc2626",
+      "text-halo-color": "#ffffff",
+      "text-halo-width": 4
+    }
+  },
+  {
+    id: "simulation-district-label",
+    type: "symbol",
+    source: SIMULATION_SOURCE_IDS.annotations,
+    filter: ["==", ["get", "kind"], "district"],
+    layout: {
+      "text-field": ["get", "label"],
+      "text-size": 13,
+      "text-font": ["Open Sans Regular"],
+      "text-allow-overlap": true
+    },
+    paint: {
+      "text-color": "#334155",
+      "text-halo-color": "#ffffff",
+      "text-halo-width": 3
+    }
+  },
+  {
+    id: "simulation-burst-label",
+    type: "symbol",
+    source: SIMULATION_SOURCE_IDS.annotations,
+    filter: ["==", ["get", "kind"], "burst"],
+    layout: {
+      "text-field": "爆管位置\nDN600 给水管线\n压力：0.18 MPa\n时间：09:00",
+      "text-size": 12,
+      "text-font": ["Open Sans Regular"],
+      "text-offset": [5.2, -3.4],
+      "text-anchor": "left",
+      "text-allow-overlap": true
+    },
+    paint: {
+      "text-color": "#0f172a",
+      "text-halo-color": "#ffffff",
+      "text-halo-width": 5
+    }
+  }
+];
+
+export const simulationLayerIds = simulationAnnotationLayers.map((layer) => layer.id);