完成管网在线模拟页面组件基本样式和布局

src/app/OlMap/MapComponent.tsx

@@ -24,6 +24,7 @@ import { bearing } from "@turf/turf";
 import { Deck } from "@deck.gl/core";
 import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
+import { tr } from "date-fns/locale";
 
 // 创建自定义Layer类来包装deck.gl
 class DeckLayer extends Layer {
@@ -89,8 +90,9 @@ const MapComponent: React.FC = () => {
   let showPipeText = true; // 控制管道文本显示
   let junctionText = "pressure";
   let pipeText = "flow";
+  let animate = false; // 控制是否动画
   const isAnimating = useRef(false); // 添加动画控制标志
-
+  const [currentZoom, setCurrentZoom] = useState(12); // 当前缩放级别
   // 防抖更新函数
   const debouncedUpdateData = useRef(
     debounce(() => {
@@ -194,7 +196,7 @@ const MapComponent: React.FC = () => {
         })
       );
       // 属性为 flow 时启动动画
-      if (pipeProperties === "flow") {
+      if (pipeProperties === "flow" && animate) {
         isAnimating.current = true;
       } else {
         isAnimating.current = false;
@@ -397,6 +399,13 @@ const MapComponent: React.FC = () => {
       padding: [50, 50, 50, 50], // 添加一些内边距
       duration: 1000, // 动画持续时间
     });
+    // 监听缩放变化
+    map.getView().on("change", () => {
+      setTimeout(() => {
+        const zoom = map.getView().getZoom() || 0;
+        setCurrentZoom(zoom);
+      }, 0);
+    });
     // 初始化 deck.gl
     const deck = new Deck({
       initialViewState: {
@@ -439,6 +448,7 @@ const MapComponent: React.FC = () => {
         getTextAnchor: "middle",
         getAlignmentBaseline: "center",
         getPixelOffset: [0, -10],
+        visible: currentZoom >= 15 && currentZoom <= 24,
         // --- 修改以下属性 ---
         // characterSet: "auto",
         // outlineWidth: 4,
@@ -458,6 +468,7 @@ const MapComponent: React.FC = () => {
         getPixelOffset: [0, -8],
         getTextAnchor: "middle",
         getAlignmentBaseline: "bottom",
+        visible: currentZoom >= 15 && currentZoom <= 24,
         // --- 修改以下属性 ---
         // characterSet: "auto",
         // outlineWidth: 5,