From 543725ee1f6bb9164a998ce183b4c8b9ef8be8fb Mon Sep 17 00:00:00 2001 From: JIANG Date: Mon, 24 Nov 2025 15:23:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99=E7=9A=84?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/OlMap/Controls/StyleEditorPanel.tsx | 17 ++++++------- src/app/OlMap/MapComponent.tsx | 28 ++++++++------------- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx index e46d150..650b806 100644 --- a/src/app/OlMap/Controls/StyleEditorPanel.tsx +++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx @@ -188,8 +188,8 @@ const StyleEditorPanel: React.FC = ({ currentPipeCalData, junctionText, pipeText, - setShowJunctionText, - setShowPipeText, + setShowJunctionTextLayer, + setShowPipeTextLayer, setShowContourLayer, setJunctionText, setPipeText, @@ -354,9 +354,9 @@ const StyleEditorPanel: React.FC = ({ } // 更新文字标签设置 if (layerId === "junctions") { - if (setJunctionText && setShowJunctionText) { + if (setJunctionText && setShowJunctionTextLayer) { setJunctionText(property); - setShowJunctionText(styleConfig.showLabels); + setShowJunctionTextLayer(styleConfig.showLabels); setApplyJunctionStyle(true); saveLayerStyle(layerId); open?.({ @@ -366,9 +366,9 @@ const StyleEditorPanel: React.FC = ({ } } if (layerId === "pipes") { - if (setPipeText && setShowPipeText) { + if (setPipeText && setShowPipeTextLayer) { setPipeText(property); - setShowPipeText(styleConfig.showLabels); + setShowPipeTextLayer(styleConfig.showLabels); setApplyPipeStyle(true); saveLayerStyle(layerId); open?.({ @@ -414,7 +414,6 @@ const StyleEditorPanel: React.FC = ({ // 如果不足则补齐最后一个值 while (breaks.length < desired) breaks.push(breaks[breaks.length - 1] ?? 0); - console.log(breaks); } else { const calc = calculateClassification( currentJunctionCalData.map((d) => d.value), @@ -676,11 +675,11 @@ const StyleEditorPanel: React.FC = ({ // 重置样式应用状态 if (layerId === "junctions") { setApplyJunctionStyle(false); - if (setShowJunctionText) setShowJunctionText(false); + if (setShowJunctionTextLayer) setShowJunctionTextLayer(false); if (setJunctionText) setJunctionText(""); } else if (layerId === "pipes") { setApplyPipeStyle(false); - if (setShowPipeText) setShowPipeText(false); + if (setShowPipeTextLayer) setShowPipeTextLayer(false); if (setPipeText) setPipeText(""); } } diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 0830730..e72c233 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -47,8 +47,8 @@ interface DataContextType { setCurrentPipeCalData?: React.Dispatch>; showJunctionText?: boolean; // 是否显示节点文本 showPipeText?: boolean; // 是否显示管道文本 - setShowJunctionText?: React.Dispatch>; - setShowPipeText?: React.Dispatch>; + setShowJunctionTextLayer?: React.Dispatch>; + setShowPipeTextLayer?: React.Dispatch>; setShowContourLayer?: React.Dispatch>; junctionText: string; pipeText: string; @@ -108,11 +108,9 @@ const MapComponent: React.FC = ({ children }) => { const tileJunctionDataBuffer = useRef([]); const tilePipeDataBuffer = useRef([]); - const [showJunctionText, setShowJunctionText] = useState(false); // 控制节点文本显示 - const [showPipeText, setShowPipeText] = useState(false); // 控制管道文本显示 - const [showJunctionTextLayer, setShowJunctionTextLayer] = useState(true); // 控制节点文本图层显示 - const [showPipeTextLayer, setShowPipeTextLayer] = useState(true); // 控制管道文本图层显示 - const [showContourLayer, setShowContourLayer] = useState(true); // 控制等高线图层显示 + const [showJunctionTextLayer, setShowJunctionTextLayer] = useState(false); // 控制节点文本图层显示 + const [showPipeTextLayer, setShowPipeTextLayer] = useState(false); // 控制管道文本图层显示 + const [showContourLayer, setShowContourLayer] = useState(false); // 控制等高线图层显示 const [junctionText, setJunctionText] = useState("pressure"); const [pipeText, setPipeText] = useState("flow"); const flowAnimation = useRef(false); // 添加动画控制标志 @@ -675,12 +673,10 @@ const MapComponent: React.FC = ({ children }) => { if (!deckLayer) return; // 如果 deck 实例还未创建，则退出 if (!junctionData.length) return; if (!pipeData.length) return; - console.log(pipeData); - console.log(pipeText); const junctionTextLayer = new TextLayer({ id: "junctionTextLayer", zIndex: 10, - data: showJunctionText ? junctionData : [], + data: junctionData, getPosition: (d: any) => d.position, fontFamily: "Monaco, monospace", getText: (d: any) => @@ -710,7 +706,7 @@ const MapComponent: React.FC = ({ children }) => { const pipeTextLayer = new TextLayer({ id: "pipeTextLayer", zIndex: 10, - data: showPipeText ? pipeData : [], + data: pipeData, getPosition: (d: any) => d.position, fontFamily: "Monaco, monospace", getText: (d: any) => @@ -753,8 +749,6 @@ const MapComponent: React.FC = ({ children }) => { junctionData, pipeData, currentZoom, - showJunctionText, - showPipeText, showJunctionTextLayer, showPipeTextLayer, showContourLayer, @@ -775,7 +769,7 @@ const MapComponent: React.FC = ({ children }) => { // 动画循环 const animate = () => { - if (!deckRef.current || !flowAnimation.current) return; // 添加检查，防止空数据或停止旧循环 + if (!flowAnimation.current) return; // 添加检查，防止空数据或停止旧循环 // 动画总时长（秒） if (pipeData.length === 0) { animationFrameId = requestAnimationFrame(animate); @@ -887,13 +881,11 @@ const MapComponent: React.FC = ({ children }) => { setCurrentJunctionCalData, currentPipeCalData, setCurrentPipeCalData, - setShowJunctionText, - setShowPipeText, + setShowJunctionTextLayer, + setShowPipeTextLayer, setShowContourLayer, setJunctionText, setPipeText, - showJunctionText, - showPipeText, junctionText, pipeText, }}