完成页面的基础配置

src/app/OlMap/Controls/Toolbar.tsx

@@ -0,0 +1,471 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useMap } from "../MapComponent";
+import ToolbarButton from "@/components/olmap/common/ToolbarButton";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import PaletteOutlinedIcon from "@mui/icons-material/PaletteOutlined";
+import PropertyPanel from "./PropertyPanel"; // 引入属性面板组件
+import DrawPanel from "./DrawPanel"; // 引入绘图面板组件
+
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import { Style, Stroke, Fill, Circle } from "ol/style";
+import { Geometry } from "ol/geom";
+import { Point, LineString, Polygon } from "ol/geom";
+import { FeatureLike } from "ol/Feature";
+import Feature from "ol/Feature";
+import GeoJSON from "ol/format/GeoJSON";
+import StyleEditorPanel from "./StyleEditorPanel";
+import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
+import VectorTileSource from "ol/source/VectorTile";
+import TileState from "ol/TileState";
+import { toLonLat } from "ol/proj";
+import { booleanIntersects, buffer, point, toWgs84 } from "@turf/turf";
+import RenderFeature from "ol/render/Feature";
+
+const Toolbar: React.FC = () => {
+  const map = useMap();
+  const [activeTools, setActiveTools] = useState<string[]>([]);
+  const [highlightFeature, setHighlightFeature] = useState<FeatureLike | null>(
+    null
+  );
+  const [showPropertyPanel, setShowPropertyPanel] = useState<boolean>(false);
+  const [showDrawPanel, setShowDrawPanel] = useState<boolean>(false);
+  const [showStyleEditor, setShowStyleEditor] = useState<boolean>(false);
+  const [highlightLayer, setHighlightLayer] =
+    useState<VectorLayer<VectorSource> | null>(null);
+
+  // 创建高亮图层
+  useEffect(() => {
+    if (!map) return;
+
+    const highLightSource = new VectorSource();
+    const highLightLayer = new VectorLayer({
+      source: highLightSource,
+      style: new Style({
+        stroke: new Stroke({
+          color: `rgba(255, 0, 0, 1)`,
+          width: 5,
+        }),
+        fill: new Fill({
+          color: `rgba(255, 0, 0, 0.2)`,
+        }),
+        image: new Circle({
+          radius: 7,
+          stroke: new Stroke({
+            color: `rgba(255, 0, 0, 1)`,
+            width: 3,
+          }),
+          fill: new Fill({
+            color: `rgba(255, 0, 0, 0.2)`,
+          }),
+        }),
+      }),
+    });
+
+    map.addLayer(highLightLayer);
+    setHighlightLayer(highLightLayer);
+
+    return () => {
+      map.removeLayer(highLightLayer);
+    };
+  }, [map]);
+
+  // 高亮要素的函数
+  useEffect(() => {
+    if (!highlightLayer) {
+      return;
+    }
+    const source = highlightLayer.getSource();
+    if (!source) {
+      return;
+    }
+    // 清除之前的高亮
+    source.clear();
+    // 添加新的高亮要素
+    if (highlightFeature instanceof Feature) {
+      source.addFeature(highlightFeature);
+    }
+  }, [highlightFeature]);
+  // 将 RenderFeature 转换为 Feature
+  const renderFeature2Feature = (renderFeature: RenderFeature) => {
+    if (renderFeature) {
+      const geometry = renderFeature.getGeometry();
+
+      if (geometry) {
+        try {
+          let clonedGeometry;
+
+          if (geometry instanceof Geometry) {
+            // 标准 Feature 的几何体
+            clonedGeometry = geometry;
+          } else {
+            // RenderFeature 或其他类型的几何体
+            const type = geometry.getType();
+            const flatCoordinates = geometry.getFlatCoordinates();
+            let coordinates: number[] | number[][] | number[][][];
+            switch (type) {
+              case "Point":
+                // Point: [x, y]
+                coordinates = [flatCoordinates[0], flatCoordinates[1]];
+                clonedGeometry = new Point(coordinates as number[]);
+                break;
+              case "LineString":
+                // LineString: [[x1, y1], [x2, y2], ...]
+                const lineCoords: number[][] = [];
+                for (let i = 0; i < flatCoordinates.length; i += 2) {
+                  lineCoords.push([flatCoordinates[i], flatCoordinates[i + 1]]);
+                }
+                clonedGeometry = new LineString(lineCoords);
+                break;
+              case "Polygon":
+                // Polygon: [[[x1, y1], [x2, y2], ...]]
+                // 需要获取环的结束位置
+                const ends = (
+                  geometry as { getEnds?: () => number[] }
+                ).getEnds?.() || [flatCoordinates.length];
+                const rings: number[][][] = [];
+                let start = 0;
+
+                for (const end of ends) {
+                  const ring: number[][] = [];
+                  for (let i = start; i < end; i += 2) {
+                    ring.push([flatCoordinates[i], flatCoordinates[i + 1]]);
+                  }
+                  rings.push(ring);
+                  start = end;
+                }
+                clonedGeometry = new Polygon(rings);
+                break;
+              default:
+                console.log("不支持的几何体类型:", type);
+                return;
+            }
+          }
+          const feature = new Feature({
+            geometry: clonedGeometry,
+            ...renderFeature.getProperties(),
+          });
+          return feature;
+        } catch (error) {
+          console.error("RenderFeature转换Feature时出错:", error);
+        }
+      }
+    }
+  };
+  // 根据 IDs，通过 Geoserver WFS 服务查询要素
+  const queryFeaturesByIds = async (ids: string[], layer?: string) => {
+    if (!ids.length) return [];
+    const geoserverUrl = "http://127.0.0.1:8080/geoserver";
+    const network = "TJWater";
+    const layers = ["geo_pipes_mat", "geo_junctions_mat"];
+    const orFilter = ids.map((id) => `id=${id}`).join(" OR ");
+
+    try {
+      if (!layer) {
+        // 遍历所有图层
+        const promises = layers.map(async (layer) => {
+          try {
+            const url =
+              `${geoserverUrl}/${network}/ows?` +
+              `service=WFS&version=1.0.0&request=GetFeature&` +
+              `typeName=${network}:${layer}&outputFormat=application/json&` +
+              `CQL_FILTER=${encodeURIComponent(orFilter)}`;
+            const response = await fetch(url);
+            if (!response.ok) {
+              throw new Error(`请求失败: ${response.statusText}`);
+            }
+            return await response.json();
+          } catch (error) {
+            console.error(`图层 ${layer} 查询失败:`, error);
+            return null; // 返回 null 表示该图层查询失败
+          }
+        });
+
+        const results = await Promise.all(promises);
+        const features = results
+          .filter((json) => json !== null) // 过滤掉失败的请求
+          .flatMap((json) => new GeoJSON().readFeatures(json));
+        console.log("查询到的要素：", features);
+        return features;
+      } else {
+        // 查询指定图层
+        const url =
+          `${geoserverUrl}/${network}/ows?` +
+          `service=WFS&version=1.0.0&request=GetFeature&` +
+          `typeName=${network}:${layer}&outputFormat=application/json&` +
+          `CQL_FILTER=${encodeURIComponent(orFilter)}`;
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`请求失败: ${response.statusText}`);
+        }
+        const json = await response.json();
+        const features = new GeoJSON().readFeatures(json);
+        console.log("查询到的要素：", features);
+        return features;
+      }
+    } catch (error) {
+      console.error("根据 IDs 查询要素时出错:", error);
+      return [];
+    }
+  };
+  // 处理地图点击选择要素
+  const handleMapClickSelectFeatures = useCallback(
+    (event: { coordinate: number[] }) => {
+      if (!map) return;
+      const coord = event.coordinate;
+      let z = Math.floor(map.getView().getZoom() || 0) - 1; // 确保 z 是整数
+      const projection = map.getView().getProjection(); // 获取地图的投影
+      const pixelRatio = window.devicePixelRatio; // 获取设备像素比率
+      const [x, y] = coord;
+
+      // 遍历所有的 VectorTileSources
+      const vectorTileSources = map
+        .getAllLayers()
+        .filter((layer) => layer instanceof WebGLVectorTileLayer)
+        .map((layer) => layer.getSource() as VectorTileSource)
+        .filter((source) => source);
+      if (!vectorTileSources.length) return;
+
+      // 按几何类型分类，优先处理级别
+      const points: any[] = [];
+      const lines: any[] = [];
+      const others: any[] = [];
+
+      vectorTileSources.forEach((vectorTileSource) => {
+        const tileGrid = vectorTileSource.getTileGrid();
+        if (tileGrid) {
+          const minZoom = tileGrid.getMinZoom(); // 最小缩放级别
+          const maxZoom = tileGrid.getMaxZoom(); // 最大缩放级别
+          // 确保 z 在有效范围内
+          if (z < minZoom) z = minZoom;
+          if (z > maxZoom) z = maxZoom;
+        } else {
+          return;
+        }
+
+        const tileCoord = tileGrid.getTileCoordForCoordAndZ([x, y], z);
+        // 设置 resolution 用于基于屏幕像素的 buffer 容差计算
+        const resolution = tileGrid.getResolution(tileCoord[0]);
+        const hitTolerance = 5; // 像素容差
+        const hitPoint = point(toLonLat(coord));
+        const buffered = buffer(hitPoint, resolution * hitTolerance, {
+          units: "meters",
+        });
+        // 获取 VectorRenderTile
+        const vectorRenderTile = vectorTileSource.getTile(
+          tileCoord[0],
+          tileCoord[1],
+          tileCoord[2],
+          pixelRatio,
+          projection
+        );
+
+        // 获取 SourceTiles
+        const vectorTiles = vectorTileSource.getSourceTiles(
+          pixelRatio,
+          projection,
+          vectorRenderTile
+        );
+
+        vectorTiles.forEach((vectorTile) => {
+          if (vectorTile.getState() === TileState.LOADED) {
+            const renderFeatures = vectorTile.getFeatures();
+
+            const selectedFeatures = renderFeatures
+              .map(
+                (renderFeature) =>
+                  renderFeature2Feature(renderFeature) as Feature<any>
+              )
+              .filter((feature) => {
+                if (feature && buffered) {
+                  const geoJSONGeometry = new GeoJSON().writeGeometryObject(
+                    feature.getGeometry()
+                  );
+                  const bufferedGeometry = buffered.geometry;
+                  return booleanIntersects(
+                    toWgs84(geoJSONGeometry),
+                    bufferedGeometry
+                  );
+                }
+                return false;
+              });
+            selectedFeatures.forEach((selectedFeature) => {
+              const geometryType = selectedFeature.getGeometry()?.getType();
+              if (geometryType === "Point") {
+                points.push(selectedFeature);
+              } else if (geometryType === "LineString") {
+                lines.push(selectedFeature);
+              } else {
+                others.push(selectedFeature);
+              }
+            });
+          }
+        });
+      });
+      // 按优先级处理：点 > 线 > 其他
+      const selectedFeatures = [...points, ...lines, ...others];
+      const firstFeature = selectedFeatures[0] as Feature<any>;
+      const queryId = firstFeature?.getProperties().id;
+      // console.log(queryId, "queryId");
+      if (queryId) {
+        queryFeaturesByIds([queryId]).then((features) => {
+          // console.log("查询到的要素：", features);
+          setHighlightFeature(features[0]);
+        });
+      } else {
+        setHighlightFeature(null);
+      }
+    },
+    [map, highlightLayer, setHighlightFeature]
+  );
+
+  // 添加矢量属性查询事件监听器
+  useEffect(() => {
+    if (!activeTools.includes("info") || !map) return;
+    map.on("click", handleMapClickSelectFeatures);
+
+    return () => {
+      map.un("click", handleMapClickSelectFeatures);
+    };
+  }, [activeTools, map, handleMapClickSelectFeatures]);
+
+  // 处理工具栏按钮点击事件
+  const handleToolClick = (tool: string) => {
+    // 样式工具的特殊处理 - 只有再次点击时才会取消激活和关闭
+    if (tool === "style") {
+      if (activeTools.includes("style")) {
+        // 如果样式工具已激活，点击时关闭
+        setShowStyleEditor(false);
+        setActiveTools((prev) => prev.filter((t) => t !== "style"));
+      } else {
+        // 激活样式工具，打开样式面板
+        setActiveTools((prev) => [...prev, "style"]);
+        setShowStyleEditor(true);
+      }
+      return;
+    }
+
+    // 其他工具的处理逻辑
+    if (activeTools.includes(tool)) {
+      // 如果当前工具已激活，再次点击时取消激活并关闭面板
+      deactivateTool(tool);
+      setActiveTools((prev) => prev.filter((t) => t !== tool));
+    } else {
+      // 如果当前工具未激活，先关闭所有其他工具，然后激活当前工具
+      // 关闭所有面板（但保持样式编辑器状态）
+      closeAllPanelsExceptStyle();
+
+      // 取消激活所有非样式工具
+      setActiveTools((prev) => {
+        const styleActive = prev.includes("style");
+        return styleActive ? ["style", tool] : [tool];
+      });
+
+      // 激活当前工具并打开对应面板
+      activateTool(tool);
+    }
+  };
+
+  // 取消激活指定工具并关闭对应面板
+  const deactivateTool = (tool: string) => {
+    switch (tool) {
+      case "info":
+        setShowPropertyPanel(false);
+        setHighlightFeature(null);
+        break;
+      case "draw":
+        setShowDrawPanel(false);
+        break;
+    }
+  };
+
+  // 激活指定工具并打开对应面板
+  const activateTool = (tool: string) => {
+    switch (tool) {
+      case "info":
+        setShowPropertyPanel(true);
+        break;
+      case "draw":
+        setShowDrawPanel(true);
+        break;
+    }
+  };
+
+  // 关闭所有面板（除了样式编辑器）
+  const closeAllPanelsExceptStyle = () => {
+    setShowPropertyPanel(false);
+    setHighlightFeature(null);
+    setShowDrawPanel(false);
+    // 样式编辑器保持其当前状态，不自动关闭
+  };
+
+  // 从要素属性中提取属性面板需要的数据
+  const getFeatureProperties = useCallback(() => {
+    if (!highlightFeature) return {};
+
+    const properties = highlightFeature.getProperties();
+    console.log(properties, properties.geometry.type, "properties");
+    if (properties.geometry.getType() === "LineString") {
+      console.log(properties, "properties");
+      return {
+        id: properties.id,
+        type: "管道",
+        properties: [
+          { label: "起始节点ID", value: properties.node1 },
+          { label: "终点节点ID", value: properties.node2 },
+          { label: "长度", value: properties.length.toFixed(1), unit: "m" },
+          { label: "管径", value: properties.diameter.toFixed(1), unit: "mm" },
+          { label: "粗糙度", value: properties.roughness },
+          { label: "局部损失", value: properties.minor_loss },
+          { label: "初始状态", value: "开" },
+        ],
+      };
+    }
+    if (properties.geometry.getType() === "Point") {
+      return {
+        id: properties.id,
+        type: "节点",
+        properties: [
+          { label: "海拔", value: properties.elevation.toFixed(1), unit: "m" },
+          {
+            label: "需求量",
+            value: properties.demand.toFixed(1),
+            unit: "m³/s",
+          },
+        ],
+      };
+    }
+    return {};
+  }, [highlightFeature]);
+
+  return (
+    <>
+      <div className="absolute top-4 left-4 bg-white p-1 rounded-xl shadow-lg flex opacity-85 hover:opacity-100 transition-opacity">
+        <ToolbarButton
+          icon={<InfoOutlinedIcon />}
+          name="查看属性"
+          isActive={activeTools.includes("info")}
+          onClick={() => handleToolClick("info")}
+        />
+        <ToolbarButton
+          icon={<EditOutlinedIcon />}
+          name="矢量编辑"
+          isActive={activeTools.includes("draw")}
+          onClick={() => handleToolClick("draw")}
+        />
+        <ToolbarButton
+          icon={<PaletteOutlinedIcon />}
+          name="图层样式"
+          isActive={activeTools.includes("style")}
+          onClick={() => handleToolClick("style")}
+        />
+      </div>
+      {showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
+      {showDrawPanel && map && <DrawPanel />}
+      {showStyleEditor && <StyleEditorPanel />}
+    </>
+  );
+};
+
+export default Toolbar;