增加渲染节点功能，优化工具操作和样式

src/components/olmap/DMALeakDetection/DMALeakDetectionPanel.tsx

@@ -17,18 +17,14 @@ import {
   ChevronRight,
   FormatListBulleted,
 } from "@mui/icons-material";
-import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
-import VectorTileSource from "ol/source/VectorTile";
-import { VectorTile } from "ol";
-import { FlatStyleLike } from "ol/style/flat";
 import { useMap } from "@components/olmap/core/MapComponent";
 import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
 import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
 import RecognitionResults from "./RecognitionResults";
+import { applyJunctionAreaRender } from "./applyJunctionAreaRender";
 import { getAreaColor } from "./utils";
 import { LeakageResultDetail, LeakageSchemeRecord } from "./types";
-import { config } from "@/config/config";
 
 const TabPanel = ({
   value,
@@ -82,101 +78,26 @@ const DMALeakDetectionPanel: React.FC = () => {
 
   useEffect(() => {
     if (!map) return;
-    const junctionLayer = map
-      .getAllLayers()
-      .find(
-        (layer) =>
-          layer instanceof WebGLVectorTileLayer && layer.get("value") === "junctions",
-      ) as WebGLVectorTileLayer | undefined;
-    if (!junctionLayer) return;
-    const source = junctionLayer.getSource() as VectorTileSource;
-    if (!source) return;
-
-    if (!loadedResult || !loadedResult.node_area_map) {
-      junctionLayer.setStyle(config.MAP_DEFAULT_STYLE as FlatStyleLike);
-      return;
-    }
 
     const fallbackAreaIds = Array.from(
-      new Set(Object.values(loadedResult.node_area_map || {}).map(String)),
+      new Set(Object.values(loadedResult?.node_area_map ?? {}).map(String)),
     );
-    const areaIds = (loadedResult.areas || []).length
-      ? loadedResult.areas.map((area) => String(area.area_id))
+    const areaIds = (loadedResult?.areas ?? []).length
+      ? (loadedResult?.areas ?? []).map((area) => String(area.area_id))
       : fallbackAreaIds;
-    if (areaIds.length === 0) {
-      junctionLayer.setStyle(config.MAP_DEFAULT_STYLE as FlatStyleLike);
-      return;
-    }
-
-    const areaIdToIndex = new Map<string, number>();
-    areaIds.forEach((areaId, index) => {
-      areaIdToIndex.set(areaId, index + 1);
-    });
-
-    const nodeAreaIndexMap = new Map<string, number>();
-    Object.entries(loadedResult.node_area_map || {}).forEach(([nodeId, areaId]) => {
-      const idx = areaIdToIndex.get(String(areaId));
-      if (idx !== undefined) {
-        nodeAreaIndexMap.set(String(nodeId), idx);
-      }
-    });
-
-    const applyFeatureAreaIndex = (renderFeature: any) => {
-      const featureId = String(renderFeature.get("id") ?? "");
-      const areaIndex = nodeAreaIndexMap.get(featureId);
-      if (areaIndex !== undefined) {
-        renderFeature.properties_[DMA_AREA_INDEX_PROPERTY] = areaIndex;
-      }
-    };
-
-    const sourceTiles = (source as any).sourceTiles_;
-    if (sourceTiles) {
-      Object.values(sourceTiles).forEach((vectorTile: any) => {
-        const renderFeatures = vectorTile.getFeatures();
-        if (!renderFeatures || renderFeatures.length === 0) return;
-        renderFeatures.forEach((renderFeature: any) => {
-          applyFeatureAreaIndex(renderFeature);
-        });
-      });
-    }
-
-    const listener = (event: any) => {
-      try {
-        if (event.tile instanceof VectorTile) {
-          const renderFeatures = event.tile.getFeatures();
-          if (!renderFeatures || renderFeatures.length === 0) return;
-          renderFeatures.forEach((renderFeature: any) => {
-            applyFeatureAreaIndex(renderFeature);
-          });
-        }
-      } catch (error) {
-        console.error("Error applying DMA area mapping:", error);
-      }
-    };
-    source.on("tileloadend", listener);
-
-    const fillCases: any[] = [];
-    areaIds.forEach((areaId, index) => {
-      fillCases.push(
-        ["==", ["get", DMA_AREA_INDEX_PROPERTY], index + 1],
-        getAreaColor(areaId),
-      );
-    });
-    const defaultFillColor = String(config.MAP_DEFAULT_STYLE["circle-fill-color"]);
-    const defaultStrokeColor = String(
-      config.MAP_DEFAULT_STYLE["circle-stroke-color"],
+    const areaColors = Object.fromEntries(
+      areaIds.map((areaId) => [areaId, getAreaColor(areaId)]),
     );
-    const dmaStyle: FlatStyleLike = {
-      ...config.MAP_DEFAULT_STYLE,
-      "circle-fill-color": ["case", ...fillCases, defaultFillColor],
-      "circle-stroke-color": ["case", ...fillCases, defaultStrokeColor],
-    };
-    junctionLayer.setStyle(dmaStyle);
 
-    return () => {
-      source.un("tileloadend", listener);
-      junctionLayer.setStyle(config.MAP_DEFAULT_STYLE as FlatStyleLike);
-    };
+    return applyJunctionAreaRender(
+      map,
+      {
+        nodeAreaMap: loadedResult?.node_area_map ?? {},
+        areaIds,
+        areaColors,
+      },
+      { propertyKey: DMA_AREA_INDEX_PROPERTY },
+    );
   }, [map, loadedResult]);
 
   return (