feat(map): add five-source drainage styling

features/workbench/map/sources.ts

@@ -1,37 +1,78 @@
-import type { StyleSpecification } from "maplibre-gl";
+import type { VectorSourceSpecification, StyleSpecification } from "maplibre-gl";
+import { MAP_BACKGROUND_COLORS } from "./map-colors";
 
 export const WATER_NETWORK_GLOBAL_VIEW = {
   bbox3857: [
-    13508802,
-    3608164,
-    13555651,
-    3633686
+    13551482,
+    3612812.75,
+    13577696,
+    3632065.75
   ]
 } as const;
 
 export const SOURCE_LAYERS = {
-  pipes: "geo_pipes_mat",
-  junctions: "geo_junctions_mat"
+  conduits: "geo_conduits_mat",
+  junctions: "geo_junctions_mat",
+  orifices: "geo_orifices_mat",
+  outfalls: "geo_outfalls_mat",
+  pumps: "geo_pumps_mat"
 } as const;
 
+export const WATER_NETWORK_SOURCE_IDS = [
+  "conduits",
+  "junctions",
+  "orifices",
+  "outfalls",
+  "pumps"
+] as const;
+
+export type WaterNetworkSourceId = (typeof WATER_NETWORK_SOURCE_IDS)[number];
+
+const GEOSERVER_WMTS_ROOT = "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest";
+
 export function createWaterNetworkSources() {
   return {
-    pipes: {
-      type: "vector" as const,
-      tiles: [
-        "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest/tjwater:geo_pipes_mat/line/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile"
-      ],
-      minzoom: 0,
-      maxzoom: 24
-    },
-    junctions: {
-      type: "vector" as const,
-      tiles: [
-        "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest/tjwater:geo_junctions_mat/generic/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile"
-      ],
-      minzoom: 0,
-      maxzoom: 24
-    }
+    conduits: createLingangVectorSource(
+      SOURCE_LAYERS.conduits,
+      "line",
+      [121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165]
+    ),
+    junctions: createLingangVectorSource(
+      SOURCE_LAYERS.junctions,
+      "point",
+      [121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165]
+    ),
+    orifices: createLingangVectorSource(
+      SOURCE_LAYERS.orifices,
+      "line",
+      [121.88611269518903, 30.919491577239235, 121.9347115520599, 30.952564332104696]
+    ),
+    outfalls: createLingangVectorSource(
+      SOURCE_LAYERS.outfalls,
+      "point",
+      [121.77154156385242, 30.85723317314842, 121.77231411499677, 30.859452151585806]
+    ),
+    pumps: createLingangVectorSource(
+      SOURCE_LAYERS.pumps,
+      "line",
+      [121.73585149761436, 30.861759757577705, 121.9498481645973, 30.983213202338085]
+    )
+  };
+}
+
+function createLingangVectorSource(
+  sourceLayer: (typeof SOURCE_LAYERS)[keyof typeof SOURCE_LAYERS],
+  style: "line" | "point",
+  bounds: [number, number, number, number]
+): VectorSourceSpecification {
+  return {
+    type: "vector",
+    tiles: [
+      `${GEOSERVER_WMTS_ROOT}/lingang:${sourceLayer}/${style}/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile`
+    ],
+    bounds,
+    minzoom: 0,
+    maxzoom: 24
   };
 }
 
@@ -42,7 +83,7 @@ export function createBaseStyle(mapboxToken?: string): StyleSpecification {
       id: "background",
       type: "background",
       paint: {
-        "background-color": "#eef3f7"
+        "background-color": MAP_BACKGROUND_COLORS.primary
       }
     }
   ];