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

更新地图样式；调整时间轴，新增前进/后退一天按钮；新增爆管分析页面

Browse Source
This commit is contained in:
JIANG
2025-10-22 11:50:20 +08:00
parent 69b2e4fb98
commit 720f8a5dc2
12 changed files with 1557 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,9 +104,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const [map, setMap] = useState<OlMap>();
// currentCalData 用于存储当前计算结果
const [currentTime, setCurrentTime] = useState<number>(-1); // 默认-1表示未选择时间
const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
// const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
const [currentTime, setCurrentTime] = useState<number>(-1); // 默认选择当前时间
// const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
[]
@@ -174,21 +174,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
setPipeDataState((prev) => [...prev, ...uniqueNewData]);
}
};
const defaultFlatStyle: FlatStyleLike = {
"stroke-width": 3,
"stroke-color": "rgba(51, 153, 204, 0.9)",
"circle-fill-color": "rgba(255,255,255,0.4)",
"circle-stroke-color": "rgba(255,255,255,0.9)",
"circle-radius": [
"interpolate",
["linear"],
["zoom"],
12,
1, // 在缩放级别 12 时，圆形半径为 1px
24,
12, // 在缩放级别 24 时，圆形半径为 12px
],
};
const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
// 矢量瓦片数据源和图层
const junctionSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
@@ -435,9 +421,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontFamily: "Monaco, monospace",
getText: (d: any) =>
d[junctionText] ? (d[junctionText] as number).toFixed(3) : "",
getSize: 14,
getSize: 18,
fontWeight: "bold",
getColor: [150, 150, 255],
getColor: [255, 138, 92],
getAngle: 0,
getTextAnchor: "middle",
getAlignmentBaseline: "center",
@@ -455,8 +441,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontSize: 64,
buffer: 6,
},
outlineWidth: 10,
outlineColor: [255, 255, 255, 255],
// outlineWidth: 10,
// outlineColor: [242, 244, 246, 255],
}),
new TextLayer({
id: "pipeTextLayer",
@@ -466,9 +452,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontFamily: "Monaco, monospace",
getText: (d: any) =>
d[pipeText] ? (d[pipeText] as number).toFixed(3) : "",
getSize: 12,
getSize: 18,
fontWeight: "bold",
getColor: [120, 128, 181],
getColor: [51, 153, 204],
getAngle: (d: any) => d.angle || 0,
getPixelOffset: [0, -8],
getTextAnchor: "middle",
@@ -485,8 +471,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontSize: 64,
buffer: 6,
},
outlineWidth: 10,
outlineColor: [255, 255, 255, 255],
// outlineWidth: 10,
// outlineColor: [242, 244, 246, 255],
}),
];
deck.setProps({ layers: newLayers });