Henry_Du/FSE-Ticket.sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 重构线路图渲染引擎，引入网格化对齐与拓扑深度推导算法，完美还原真实地铁图的整齐排版

Browse Source
This commit is contained in:
Henry_Du
2026-07-12 12:17:56 +08:00
parent 20cfdc5174
commit ccb7ad5721
4 changed files with 52 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/.asset-version-state.json
+2 -2
View File
@@ -16,8 +16,8 @@
"mtimeMs": 1783602619602.658
},
"ticket-order.js": {
"size": 40982,
"mtimeMs": 1783823251900.007
"size": 41045,
"mtimeMs": 1783829841573.1077
},
"ticket-search.js": {
"size": 17269,
web/asset-versions.json
+1 -1
View File
@@ -3,7 +3,7 @@
"blog.css": 2,
"custom-dialog.js": 11,
"public-status.js": 14,
"ticket-order.js": 28,
"ticket-order.js": 29,
"ticket-search.js": 12,
"ticket-route.js": 3,
"index.js": 5,
web/ticket-order.html
+1 -1
View File
@@ -158,7 +158,7 @@
</div>
<script src="/custom-dialog.js?v=11"></script>
<script src="/ticket-order.js?v=28"></script>
<script src="/ticket-order.js?v=29"></script>
<script src="/public-status.js?v=14"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
web/ticket-order.js
+50 -43
View File
@@ -265,55 +265,61 @@
const startX = 140;
const baseY = 80;
const lineGapY = 64;
const minGapX = 68;
const gridScaleX = 96;
const occurrences = {};
// 1. Assign base Y to lines
const lineBaseY = {};
for (let i = 0; i < lineStops.length; i++) {
lineBaseY[lineStops[i].idx] = i;
}
// 2. Assign Grid X to canonical stations (Topological / Depth based)
const stationGridX = {};
for (const li of lineStops) {
for (let i = 0; i < li.stops.length; i++) {
const code = li.stops[i];
if (code === '-') continue;
li.stops.forEach((code, idx) => {
if (code === '-') return;
const canonical = stationCanonicalByCode[code] || code;
if (!occurrences[canonical]) occurrences[canonical] = [];
occurrences[canonical].push(i * minGapX);
if (stationGridX[canonical] == null) {
stationGridX[canonical] = idx;
} else {
stationGridX[canonical] = Math.max(stationGridX[canonical], idx);
}
});
}
// Relax Grid X to ensure connections always move forward (minimum 1 unit gap)
let changed = true;
let passes = 0;
while (changed && passes < 100) {
changed = false;
passes++;
for (const li of lineStops) {
let prevCanonical = null;
for (const code of li.stops) {
if (code === '-') {
prevCanonical = null;
continue;
}
const canonical = stationCanonicalByCode[code] || code;
if (prevCanonical) {
// Extra spacing if either is a transfer station to avoid crowding
const needExtra = (lineIdxsByCanonical[canonical]?.size >= 2 || lineIdxsByCanonical[prevCanonical]?.size >= 2) ? 1.5 : 1;
if (stationGridX[canonical] < stationGridX[prevCanonical] + needExtra) {
stationGridX[canonical] = stationGridX[prevCanonical] + needExtra;
changed = true;
}
}
prevCanonical = canonical;
}
}
const stationDegreeByCanonical = {};
for (const canonical of Object.keys(lineIdxsByCanonical)) {
stationDegreeByCanonical[canonical] = lineIdxsByCanonical[canonical].size;
}
stationXByCanonical = {};
for (const canonical of Object.keys(occurrences)) {
const arr = occurrences[canonical];
const avg = arr.reduce((a,b)=>a+b,0) / Math.max(1, arr.length);
stationXByCanonical[canonical] = startX + Math.round(avg);
}
const sortedCanonicals = Object.keys(stationXByCanonical).sort((a, b) => stationXByCanonical[a] - stationXByCanonical[b]);
for (let i = 1; i < sortedCanonicals.length; i++) {
const prev = sortedCanonicals[i - 1];
const cur = sortedCanonicals[i];
const minSpacing = (stationDegreeByCanonical[prev] >= 2 || stationDegreeByCanonical[cur] >= 2) ? 88 : 68;
if (stationXByCanonical[cur] < stationXByCanonical[prev] + minSpacing) {
stationXByCanonical[cur] = stationXByCanonical[prev] + minSpacing;
}
}
for (let pass = 0; pass < 3; pass++) {
for (const li of lineStops) {
let prevX = startX - minGapX;
for (const code of li.stops) {
if (code === '-') continue;
const canonical = stationCanonicalByCode[code] || code;
const x = stationXByCanonical[canonical] ?? (prevX + minGapX);
const spacing = stationDegreeByCanonical[canonical] >= 2 ? 88 : minGapX;
const nx = Math.max(x, prevX + spacing);
if (stationXByCanonical[canonical] == null || nx > stationXByCanonical[canonical]) stationXByCanonical[canonical] = nx;
prevX = stationXByCanonical[canonical];
}
}
for (const canonical of Object.keys(stationGridX)) {
stationXByCanonical[canonical] = startX + stationGridX[canonical] * gridScaleX;
}
// 3. Assign Grid Y to canonical stations (Average of their lines)
const hubYByCanonical = {};
for (const canonical of Object.keys(lineIdxsByCanonical)) {
const idxs = Array.from(lineIdxsByCanonical[canonical] || []).sort((a, b) => a - b);
@@ -475,10 +481,11 @@
`;
}
const allX = Object.values(stationXByCanonical);
const maxX = allX.length > 0 ? Math.max(...allX) : 0;
const width = Math.max(800, maxX + 180);
const height = Math.max(260, baseY + currentLineIdx * lineGapY + 60);
const allCanonicals = Object.keys(stationXByCanonical);
const minX = Math.min(...allCanonicals.map(c => stationXByCanonical[c] || 0));
const maxX = Math.max(...allCanonicals.map(c => stationXByCanonical[c] || 0));
const width = Math.max(560, maxX + 200);
const height = Math.max(260, baseY + currentLineIdx * lineGapY + 120);
mapContainer.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${svgContent}</svg>`;
} catch(e) {