feat(map): add five-source drainage styling

2026-07-10 18:45:43 +08:00
parent 2258177726
commit 513c403017
19 changed files with 1303 additions and 182 deletions
@@ -0,0 +1,106 @@
+import type { StyleSpecification } from "maplibre-gl";
+
+type LayerSpecification = StyleSpecification["layers"][number];
+type LineLayerSpecification = Extract<LayerSpecification, { type: "line" }>;
+type CircleLayerSpecification = Extract<LayerSpecification, { type: "circle" }>;
+type LineWidth = NonNullable<LineLayerSpecification["paint"]>["line-width"];
+type CircleRadius = NonNullable<CircleLayerSpecification["paint"]>["circle-radius"];
+
+export const MAP_MAX_ZOOM = 24;
+
+const lineHitWidth = [
+  "interpolate",
+  ["linear"],
+  ["zoom"],
+  11,
+  16,
+  17,
+  18,
+  22,
+  22,
+  24,
+  24
+] as LineWidth;
+
+const pointHitRadius = [
+  "interpolate",
+  ["linear"],
+  ["zoom"],
+  12,
+  9,
+  16,
+  10,
+  20,
+  12,
+  24,
+  14
+] as CircleRadius;
+
+export const DRAINAGE_LAYER_VISUALS = {
+  conduits: {
+    minzoom: 9,
+    casingWidth: [
+      "interpolate", ["linear"], ["zoom"],
+      9, 1.8,
+      13, 3,
+      17, ["+", 4.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
+      22, ["+", 6, ["/", ["coalesce", ["get", "diameter"], 100], 260]],
+      24, ["+", 7, ["/", ["coalesce", ["get", "diameter"], 100], 240]]
+    ] as LineWidth,
+    width: [
+      "interpolate", ["linear"], ["zoom"],
+      9, 0.9,
+      13, 1.8,
+      17, ["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]],
+      22, ["+", 3.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
+      24, ["+", 4, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
+    ] as LineWidth,
+    riskGlowWidth: ["interpolate", ["linear"], ["zoom"], 12, 2.6, 17, 7.5, 22, 9.5, 24, 11] as LineWidth,
+    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 9, 5.5, 13, 8, 17, 12.5, 22, 15, 24, 17] as LineWidth,
+    hoverWidth: ["interpolate", ["linear"], ["zoom"], 9, 3, 13, 5.2, 17, 9, 22, 11.5, 24, 13] as LineWidth,
+    selectedHaloWidth: ["interpolate", ["linear"], ["zoom"], 9, 7, 13, 10, 17, 14.5, 22, 17.5, 24, 20] as LineWidth,
+    selectedOutlineWidth: ["interpolate", ["linear"], ["zoom"], 9, 5.5, 13, 8.2, 17, 12.5, 22, 15.5, 24, 18] as LineWidth,
+    selectedWidth: ["interpolate", ["linear"], ["zoom"], 9, 4, 13, 6.5, 17, 10.5, 22, 13.5, 24, 16] as LineWidth,
+    hitWidth: lineHitWidth
+  },
+  junctions: {
+    minzoom: 12,
+    haloRadius: ["interpolate", ["linear"], ["zoom"], 12, 2.5, 16, 4.5, 20, 7, 24, 9.5] as CircleRadius,
+    radius: ["interpolate", ["linear"], ["zoom"], 12, 1, 16, 3, 20, 5.5, 24, 8] as CircleRadius,
+    hoverRadius: ["interpolate", ["linear"], ["zoom"], 12, 5, 16, 7, 20, 10, 24, 12] as CircleRadius,
+    selectedHaloRadius: ["interpolate", ["linear"], ["zoom"], 12, 10.5, 16, 12.5, 20, 15.5, 24, 18] as CircleRadius,
+    selectedRadius: ["interpolate", ["linear"], ["zoom"], 12, 5.5, 16, 7.5, 20, 10.5, 24, 13] as CircleRadius,
+    hitRadius: pointHitRadius
+  },
+  orifices: {
+    minzoom: 11,
+    casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 3.2, 17, 7.5, 22, 9, 24, 10] as LineWidth,
+    width: ["interpolate", ["linear"], ["zoom"], 11, 1.6, 17, 4.5, 22, 6, 24, 7] as LineWidth,
+    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10.5, 22, 12.5, 24, 14] as LineWidth,
+    hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 7, 22, 9, 24, 10.5] as LineWidth,
+    selectedHaloWidth: ["interpolate", ["linear"], ["zoom"], 11, 8, 17, 13, 22, 16, 24, 18] as LineWidth,
+    selectedOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 6.75, 17, 11, 22, 14, 24, 16] as LineWidth,
+    selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 5.5, 17, 9, 22, 12, 24, 14] as LineWidth,
+    hitWidth: lineHitWidth
+  },
+  pumps: {
+    minzoom: 11,
+    casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 9.5, 22, 11, 24, 12] as LineWidth,
+    width: ["interpolate", ["linear"], ["zoom"], 11, 2.4, 17, 6.2, 22, 8, 24, 9] as LineWidth,
+    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 7, 17, 12, 22, 14, 24, 16] as LineWidth,
+    hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4.5, 17, 8.5, 22, 10.5, 24, 12] as LineWidth,
+    selectedHaloWidth: ["interpolate", ["linear"], ["zoom"], 11, 9, 17, 14, 22, 17, 24, 19] as LineWidth,
+    selectedOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 7.5, 17, 12, 22, 15, 24, 17] as LineWidth,
+    selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10, 22, 13, 24, 15] as LineWidth,
+    hitWidth: lineHitWidth
+  },
+  outfalls: {
+    minzoom: 11,
+    haloRadius: ["interpolate", ["linear"], ["zoom"], 11, 5, 16, 7, 20, 9, 24, 11] as CircleRadius,
+    radius: ["interpolate", ["linear"], ["zoom"], 11, 3, 16, 5, 20, 7, 24, 9] as CircleRadius,
+    hoverRadius: ["interpolate", ["linear"], ["zoom"], 11, 6, 16, 8, 20, 11, 24, 13] as CircleRadius,
+    selectedHaloRadius: ["interpolate", ["linear"], ["zoom"], 11, 12.5, 16, 14.5, 20, 17.5, 24, 20] as CircleRadius,
+    selectedRadius: ["interpolate", ["linear"], ["zoom"], 11, 7.5, 16, 9.5, 20, 12.5, 24, 15] as CircleRadius,
+    hitRadius: pointHitRadius
+  }
+} as const;