新增固有属性的样式计算

src/app/OlMap/MapComponent.tsx

@@ -63,6 +63,8 @@ interface DataContextType {
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
   setContours?: React.Dispatch<React.SetStateAction<any[]>>;
   deckLayer?: DeckLayer;
+  diameterRange?: [number, number];
+  elevationRange?: [number, number];
 }
 
 // 跨组件传递
@@ -130,6 +132,13 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [showWaterflowLayer, setShowWaterflowLayer] = useState(false); // 控制等高线图层显示
   const [currentZoom, setCurrentZoom] = useState(11); // 当前缩放级别
 
+  const [diameterRange, setDiameterRange] = useState<
+    [number, number] | undefined
+  >();
+  const [elevationRange, setElevationRange] = useState<
+    [number, number] | undefined
+  >();
+
   // 防抖更新函数
   const debouncedUpdateData = useRef(
     debounce(() => {
@@ -155,6 +164,24 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     });
     if (uniqueNewData.length > 0) {
       setJunctionDataState((prev) => prev.concat(uniqueNewData));
+      setElevationRange((prev) => {
+        const elevations = uniqueNewData
+          .map((d) => d.elevation)
+          .filter((v) => typeof v === "number");
+        if (elevations.length === 0) return prev;
+
+        let newMin = elevations[0];
+        let newMax = elevations[0];
+        for (let i = 1; i < elevations.length; i++) {
+          if (elevations[i] < newMin) newMin = elevations[i];
+          if (elevations[i] > newMax) newMax = elevations[i];
+        }
+
+        if (!prev) {
+          return [newMin, newMax];
+        }
+        return [Math.min(prev[0], newMin), Math.max(prev[1], newMax)];
+      });
     }
   };
   const setPipeData = (newData: any[]) => {
@@ -168,6 +195,24 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     });
     if (uniqueNewData.length > 0) {
       setPipeDataState((prev) => prev.concat(uniqueNewData));
+      setDiameterRange((prev) => {
+        const diameters = uniqueNewData
+          .map((d) => d.diameter)
+          .filter((v) => typeof v === "number");
+        if (diameters.length === 0) return prev;
+
+        let newMin = diameters[0];
+        let newMax = diameters[0];
+        for (let i = 1; i < diameters.length; i++) {
+          if (diameters[i] < newMin) newMin = diameters[i];
+          if (diameters[i] > newMax) newMax = diameters[i];
+        }
+
+        if (!prev) {
+          return [newMin, newMax];
+        }
+        return [Math.min(prev[0], newMin), Math.max(prev[1], newMax)];
+      });
     }
   };
   // 配置地图数据源、图层和样式
@@ -295,8 +340,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         // { name: "需求量", value: "demand" },
         { name: "高程", value: "elevation" },
         // 计算属性
-        { name: "实际需求量", value: "actualdemand" },
-        { name: "水头", value: "head" },
+        { name: "实际需水量", value: "actual_demand" },
+        { name: "水头", value: "total_head" },
         { name: "压力", value: "pressure" },
         { name: "水质", value: "quality" },
       ],
@@ -985,6 +1030,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           pipeText,
           setContours,
           deckLayer,
+          diameterRange,
+          elevationRange,
         }}
       >
         <MapContext.Provider value={map}>