OrgTJWater/TJWaterServer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现管道、节点图层文字属性的切换

Browse Source
This commit is contained in:
JIANG
2025-12-30 11:05:55 +08:00
parent 4b257aa959
commit 7285a3315f
3 changed files with 107 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/app/OlMap/MapComponent.tsx
View File

@@ -45,12 +45,15 @@ interface DataContextType {
currentJunctionCalData?: any[]; // 当前计算结果
setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
currentPipeCalData?: any[]; // 当前计算结果
pipeData?: any[]; // 管道数据（含坐标等信息）
setCurrentPipeCalData?: React.Dispatch<React.SetStateAction<any[]>>;
showJunctionText?: boolean; // 是否显示节点文本
showPipeText?: boolean; // 是否显示管道文本
showJunctionId?: boolean; // 是否显示节点ID
showPipeId?: boolean; // 是否显示管道ID
setShowJunctionTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
setShowPipeTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
setShowJunctionId?: React.Dispatch<React.SetStateAction<boolean>>;
setShowPipeId?: React.Dispatch<React.SetStateAction<boolean>>;
setShowContourLayer?: React.Dispatch<React.SetStateAction<boolean>>;
isContourLayerAvailable?: boolean;
setShowWaterflowLayer?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -121,6 +124,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const [showJunctionTextLayer, setShowJunctionTextLayer] = useState(false); // 控制节点文本图层显示
const [showPipeTextLayer, setShowPipeTextLayer] = useState(false); // 控制管道文本图层显示
const [showJunctionId, setShowJunctionId] = useState(false); // 控制节点ID显示
const [showPipeId, setShowPipeId] = useState(false); // 控制管道ID显示
const [showContourLayer, setShowContourLayer] = useState(false); // 控制等高线图层显示
const [junctionText, setJunctionText] = useState("pressure");
const [pipeText, setPipeText] = useState("flow");
@@ -739,6 +744,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
if (!deckLayer) return; // 如果 deck 实例还未创建，则退出
if (!junctionData.length) return;
if (!pipeData.length) return;
console.log(showJunctionId, showJunctionTextLayer, junctionText);
console.log(showPipeId, showPipeTextLayer, pipeText);
const junctionTextLayer = new TextLayer({
id: "junctionTextLayer",
name: "节点文字",
@@ -747,17 +754,22 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
getPosition: (d: any) => d.position,
fontFamily: "Monaco, monospace",
getText: (d: any) => {
if (!d[junctionText]) return "";
const value = (d[junctionText] as number).toFixed(3);
// 根据属性类型添加符号前缀
const prefix =
{
pressure: "P:",
head: "H:",
quality: "Q:",
actualdemand: "D:",
}[junctionText] || "";
return `${prefix}${value}`;
let idPart = showJunctionId ? d.id : "";
let propPart = "";
if (showJunctionTextLayer && d[junctionText] !== undefined) {
const value = (d[junctionText] as number).toFixed(3);
// 根据属性类型添加符号前缀
const prefix =
{
pressure: "P:",
head: "H:",
quality: "Q:",
actualdemand: "D:",
}[junctionText] || "";
propPart = `${prefix}${value}`;
}
if (idPart && propPart) return `${idPart} - ${propPart}`;
return idPart || propPart;
},
getSize: 14,
fontWeight: "bold",
@@ -766,7 +778,13 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
getTextAnchor: "middle",
getAlignmentBaseline: "center",
getPixelOffset: [0, -10],
visible: showJunctionTextLayer && currentZoom >= 15 && currentZoom <= 24,
visible:
(showJunctionTextLayer || showJunctionId) &&
currentZoom >= 15 &&
currentZoom <= 24,
updateTriggers: {
getText: [showJunctionId, showJunctionTextLayer, junctionText],
},
extensions: [new CollisionFilterExtension()],
collisionTestProps: {
sizeScale: 3,
@@ -789,18 +807,23 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
getPosition: (d: any) => d.position,
fontFamily: "Monaco, monospace",
getText: (d: any) => {
if (!d[pipeText]) return "";
const value = Math.abs(d[pipeText] as number).toFixed(3);
// 根据属性类型添加符号前缀
const prefix =
{
flow: "F:",
velocity: "V:",
headloss: "HL:",
diameter: "D:",
friction: "FR:",
}[pipeText] || "";
return `${prefix}${value}`;
let idPart = showPipeId ? d.id : "";
let propPart = "";
if (showPipeTextLayer && d[pipeText] !== undefined) {
const value = Math.abs(d[pipeText] as number).toFixed(3);
// 根据属性类型添加符号前缀
const prefix =
{
flow: "F:",
velocity: "V:",
headloss: "HL:",
diameter: "D:",
friction: "FR:",
}[pipeText] || "";
propPart = `${prefix}${value}`;
}
if (idPart && propPart) return `${idPart} - ${propPart}`;
return idPart || propPart;
},
getSize: 14,
fontWeight: "bold",
@@ -809,7 +832,13 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
getPixelOffset: [0, -8],
getTextAnchor: "middle",
getAlignmentBaseline: "bottom",
visible: showPipeTextLayer && currentZoom >= 15 && currentZoom <= 24,
visible:
(showPipeTextLayer || showPipeId) &&
currentZoom >= 15 &&
currentZoom <= 24,
updateTriggers: {
getText: [showPipeId, showPipeTextLayer, pipeText],
},
extensions: [new CollisionFilterExtension()],
collisionTestProps: {
sizeScale: 3,
@@ -845,6 +874,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
deckLayer.addDeckLayer(junctionTextLayer);
}
if (deckLayer.getDeckLayerById("pipeTextLayer")) {
console.log("更新管道文字图层");
deckLayer.updateDeckLayer("pipeTextLayer", pipeTextLayer);
} else {
deckLayer.addDeckLayer(pipeTextLayer);
@@ -860,6 +890,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
currentZoom,
showJunctionTextLayer,
showPipeTextLayer,
showJunctionId,
showPipeId,
showContourLayer,
junctionText,
pipeText,
@@ -1015,9 +1047,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
setCurrentJunctionCalData,
currentPipeCalData,
setCurrentPipeCalData,
pipeData,
setShowJunctionTextLayer,
setShowPipeTextLayer,
setShowJunctionId,
setShowPipeId,
showJunctionId,
showPipeId,
setShowContourLayer,
isContourLayerAvailable,
setContourLayerAvailable,