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,101 @@
+import type { StyleSpecification } from "maplibre-gl";
+
+export const WATER_NETWORK_GLOBAL_VIEW = {
+  bbox3857: [
+    13508802,
+    3608164,
+    13555651,
+    3633686
+  ]
+} as const;
+
+export const SOURCE_LAYERS = {
+  pipes: "geo_pipes_mat",
+  junctions: "geo_junctions_mat"
+} as const;
+
+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
+    }
+  };
+}
+
+export function createBaseStyle(mapboxToken?: string): StyleSpecification {
+  const sources: StyleSpecification["sources"] = {};
+  const layers: StyleSpecification["layers"] = [
+    {
+      id: "background",
+      type: "background",
+      paint: {
+        "background-color": "#eef3f7"
+      }
+    }
+  ];
+
+  if (mapboxToken) {
+    sources["mapbox-light"] = {
+      type: "raster",
+      tiles: [
+        `https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
+      ],
+      tileSize: 512,
+      attribution:
+        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    };
+    sources["mapbox-satellite"] = {
+      type: "raster",
+      tiles: [
+        `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
+      ],
+      tileSize: 512,
+      attribution:
+        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    };
+
+    layers.push({
+      id: "mapbox-light",
+      type: "raster",
+      source: "mapbox-light",
+      paint: {
+        "raster-opacity": 0.82,
+        "raster-saturation": -0.22,
+        "raster-contrast": 0.04
+      }
+    });
+    layers.push({
+      id: "mapbox-satellite",
+      type: "raster",
+      source: "mapbox-satellite",
+      layout: {
+        visibility: "none"
+      },
+      paint: {
+        "raster-opacity": 0.86,
+        "raster-saturation": -0.16,
+        "raster-contrast": 0.02
+      }
+    });
+  }
+
+  return {
+    version: 8,
+    glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
+    sources,
+    layers
+  };
+}