feat(map): refine SCADA feature experience

features/workbench/map/sources.ts

@@ -1,5 +1,6 @@
 import type { VectorSourceSpecification, StyleSpecification } from "maplibre-gl";
-import { MAP_BACKGROUND_COLORS } from "./map-colors";
+import { MAP_URL } from "../../../lib/config";
+import { MAP_STYLE_TOKENS } from "./map-colors";
 
 export const WATER_NETWORK_GLOBAL_VIEW = {
   bbox3857: [
@@ -15,7 +16,8 @@ export const SOURCE_LAYERS = {
   junctions: "geo_junctions_mat",
   orifices: "geo_orifices_mat",
   outfalls: "geo_outfalls_mat",
-  pumps: "geo_pumps_mat"
+  pumps: "geo_pumps_mat",
+  scada: "scada_points"
 } as const;
 
 export const WATER_NETWORK_SOURCE_IDS = [
@@ -23,12 +25,13 @@ export const WATER_NETWORK_SOURCE_IDS = [
   "junctions",
   "orifices",
   "outfalls",
-  "pumps"
+  "pumps",
+  "scada"
 ] as const;
 
 export type WaterNetworkSourceId = (typeof WATER_NETWORK_SOURCE_IDS)[number];
 
-const GEOSERVER_WMTS_ROOT = "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest";
+const GEOSERVER_WMTS_ROOT = `${MAP_URL}/gwc/service/wmts/rest`;
 
 export function createWaterNetworkSources() {
   return {
@@ -56,7 +59,8 @@ export function createWaterNetworkSources() {
       SOURCE_LAYERS.pumps,
       "line",
       [121.73585149761436, 30.861759757577705, 121.9498481645973, 30.983213202338085]
-    )
+    ),
+    scada: createLingangVectorSource(SOURCE_LAYERS.scada, "point", [121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165])
   };
 }
 
@@ -67,6 +71,7 @@ function createLingangVectorSource(
 ): VectorSourceSpecification {
   return {
     type: "vector",
+    promoteId: "id",
     tiles: [
       `${GEOSERVER_WMTS_ROOT}/lingang:${sourceLayer}/${style}/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile`
     ],
@@ -83,7 +88,7 @@ export function createBaseStyle(mapboxToken?: string): StyleSpecification {
       id: "background",
       type: "background",
       paint: {
-        "background-color": MAP_BACKGROUND_COLORS.primary
+        "background-color": MAP_STYLE_TOKENS.canvas.primary
       }
     }
   ];