fix(web): 重构线路图渲染算法，实现平行水平走线与胶囊式垂直换乘
This commit is contained in:
@@ -16,8 +16,8 @@
|
||||
"mtimeMs": 1783602619602.658
|
||||
},
|
||||
"ticket-order.js": {
|
||||
"size": 33248,
|
||||
"mtimeMs": 1783780167713.1963
|
||||
"size": 32045,
|
||||
"mtimeMs": 1783782910999.121
|
||||
},
|
||||
"ticket-search.js": {
|
||||
"size": 17269,
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"blog.css": 2,
|
||||
"custom-dialog.js": 11,
|
||||
"public-status.js": 14,
|
||||
"ticket-order.js": 19,
|
||||
"ticket-order.js": 20,
|
||||
"ticket-search.js": 12,
|
||||
"ticket-route.js": 3,
|
||||
"index.js": 5,
|
||||
|
||||
@@ -158,7 +158,7 @@
|
||||
</div>
|
||||
|
||||
<script src="/custom-dialog.js?v=11"></script>
|
||||
<script src="/ticket-order.js?v=19"></script>
|
||||
<script src="/ticket-order.js?v=20"></script>
|
||||
<script src="/public-status.js?v=14"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
+56
-69
@@ -221,39 +221,13 @@
|
||||
}
|
||||
|
||||
stationYByCanonical = {};
|
||||
const ysByCanonical = {};
|
||||
for (const c of Object.keys(primaryLineByStation)) {
|
||||
const li = primaryLineByStation[c];
|
||||
if (li == null) continue;
|
||||
const canonical = stationCanonicalByCode[c] || c;
|
||||
if (!ysByCanonical[canonical]) ysByCanonical[canonical] = [];
|
||||
ysByCanonical[canonical].push(baseY + li * lineGapY);
|
||||
for (const li of lineStops) {
|
||||
const yNode = baseY + li.idx * lineGapY;
|
||||
for (const c of li.stops) {
|
||||
if (stationYByCanonical[c] == null) {
|
||||
stationYByCanonical[c] = yNode;
|
||||
}
|
||||
|
||||
const canonicalY = {};
|
||||
for (const canonical of Object.keys(ysByCanonical)) {
|
||||
const ys = ysByCanonical[canonical];
|
||||
canonicalY[canonical] = ys.reduce((a,b) => a+b, 0) / ys.length;
|
||||
}
|
||||
|
||||
for (const c of Object.keys(primaryLineByStation)) {
|
||||
const canonical = stationCanonicalByCode[c] || c;
|
||||
stationYByCanonical[c] = canonicalY[canonical];
|
||||
}
|
||||
|
||||
const allStations = Object.keys(primaryLineByStation);
|
||||
if (allStations.length === 0) {
|
||||
mapContainer.innerHTML = '<div class="empty-state jr-empty-state"><p>线路数据为空，请稍后再试。</p></div>';
|
||||
return;
|
||||
}
|
||||
const labelShownForCanonical = new Set();
|
||||
const transferColorsByStation = {};
|
||||
const primaryColorByStation = {};
|
||||
for (const c of allStations) {
|
||||
const lineIdxs = Array.from(new Set(linesByStation.get(c) || [])).sort((a,b)=>a-b);
|
||||
const colors = lineIdxs.map(i => lineColors[i]).filter(Boolean);
|
||||
transferColorsByStation[c] = Array.from(new Set(colors));
|
||||
primaryColorByStation[c] = colors[0] || '#93a2b7';
|
||||
}
|
||||
|
||||
let svgContent = '';
|
||||
@@ -273,7 +247,7 @@
|
||||
const canonical = stationCanonicalByCode[code] || code;
|
||||
return {
|
||||
x: stationXByCanonical[canonical] || 0,
|
||||
y: stationYByCanonical[code] ?? yLine
|
||||
y: yLine
|
||||
};
|
||||
});
|
||||
|
||||
@@ -285,54 +259,67 @@
|
||||
}
|
||||
}
|
||||
|
||||
for (const canonical of Object.keys(stationCodesByCanonical)) {
|
||||
const codes = (stationCodesByCanonical[canonical] || []).filter(code => Number.isFinite(stationYByCanonical[code]));
|
||||
if (codes.length < 2) continue;
|
||||
const x = stationXByCanonical[canonical];
|
||||
const canonicalYs = {};
|
||||
for (const li of lineStops) {
|
||||
const yNode = baseY + li.idx * lineGapY;
|
||||
for (const c of li.stops) {
|
||||
const canonical = stationCanonicalByCode[c] || c;
|
||||
if (!canonicalYs[canonical]) canonicalYs[canonical] = [];
|
||||
// Only add if we haven't added this Y for this canonical yet
|
||||
if (!canonicalYs[canonical].some(n => n.y === yNode)) {
|
||||
canonicalYs[canonical].push({ y: yNode, color: li.color, code: c });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const ys = codes.map(c => stationYByCanonical[c]);
|
||||
for (const canonical of Object.keys(canonicalYs)) {
|
||||
const x = stationXByCanonical[canonical];
|
||||
const nodes = canonicalYs[canonical];
|
||||
const ys = nodes.map(n => n.y);
|
||||
const minY = Math.min(...ys);
|
||||
const maxY = Math.max(...ys);
|
||||
const isTransfer = nodes.length >= 2 || stationCodesByCanonical[canonical]?.length >= 2;
|
||||
|
||||
// Draw vertical pill connecting the transfer stations
|
||||
// Vertical pill
|
||||
if (maxY > minY) {
|
||||
svgContent += `<rect x="${x - 8}" y="${minY}" width="16" height="${maxY - minY}" rx="8" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
|
||||
}
|
||||
|
||||
const y = minY;
|
||||
const labelY = y - 34;
|
||||
// Remove the standalone circle for the transfer hub, just rely on the nodes themselves and the vertical pill
|
||||
// svgContent += `<circle cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
|
||||
svgContent += `<rect x="${x - 42}" y="${labelY - 16}" width="84" height="24" rx="12" fill="rgba(241,245,249,0.92)" stroke="#cbd5e1" stroke-width="1.5" />`;
|
||||
svgContent += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${getStationDisplayName(canonical)}</text>`;
|
||||
labelShownForCanonical.add(canonical);
|
||||
}
|
||||
const primaryCode = nodes[0].code;
|
||||
const name = stationNameByCode[primaryCode] || primaryCode;
|
||||
|
||||
for (const c of allStations) {
|
||||
const canonical = stationCanonicalByCode[c] || c;
|
||||
const x = stationXByCanonical[canonical];
|
||||
const yNode = stationYByCanonical[c] ?? baseY;
|
||||
const name = stationNameByCode[c] || c;
|
||||
const isTransfer = stationTransfer.has(c);
|
||||
const cls = isTransfer ? 'map-station transfer' : 'map-station';
|
||||
const ringSvg = '';
|
||||
const primaryColor = primaryColorByStation[c] || '#93a2b7';
|
||||
const outer = isTransfer
|
||||
? `<circle cx="${x}" cy="${yNode}" r="13" fill="#ffffff" stroke="${primaryColor}" stroke-width="5" />`
|
||||
: `<circle cx="${x}" cy="${yNode}" r="12" fill="#ffffff" stroke="${primaryColor}" stroke-width="5" />`;
|
||||
const transferFill = isTransfer ? `<circle cx="${x}" cy="${yNode}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />` : '';
|
||||
const coreFill = isTransfer ? '#ffffff' : '#ffffff';
|
||||
const showLabel = !isTransfer || !labelShownForCanonical.has(canonical);
|
||||
const textSvg = showLabel
|
||||
? `<text x="${x}" y="${yNode+28}" text-anchor="middle" fill="#e5e7eb" font-size="14" font-weight="700">${name}</text>`
|
||||
: '';
|
||||
svgContent += `
|
||||
<g class="${cls}" data-code="${c}" onclick="handleStationClick('${c}')" style="cursor:pointer">
|
||||
${ringSvg}
|
||||
// Nodes
|
||||
let nodesSvg = '';
|
||||
for (const node of nodes) {
|
||||
const rOuter = isTransfer ? 13 : 12;
|
||||
const outer = `<circle cx="${x}" cy="${node.y}" r="${rOuter}" fill="#ffffff" stroke="${node.color}" stroke-width="5" />`;
|
||||
const transferFill = isTransfer ? `<circle cx="${x}" cy="${node.y}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />` : '';
|
||||
nodesSvg += `
|
||||
${outer}
|
||||
${transferFill}
|
||||
<circle class="node-core" cx="${x}" cy="${yNode}" r="8" fill="${coreFill}" stroke="#111827" stroke-width="3" />
|
||||
${textSvg}
|
||||
<circle class="node-core" cx="${x}" cy="${node.y}" r="8" fill="#ffffff" stroke="#111827" stroke-width="3" />
|
||||
`;
|
||||
}
|
||||
|
||||
// Label
|
||||
let labelSvg = '';
|
||||
if (isTransfer) {
|
||||
const labelY = minY - 34; // above the top node
|
||||
labelSvg += `<rect x="${x - 42}" y="${labelY - 16}" width="84" height="24" rx="12" fill="rgba(241,245,249,0.92)" stroke="#cbd5e1" stroke-width="1.5" />`;
|
||||
labelSvg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${getStationDisplayName(canonical)}</text>`;
|
||||
} else {
|
||||
const labelY = maxY + 28; // below the single node
|
||||
labelSvg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#e5e7eb" font-size="14" font-weight="700">${name}</text>`;
|
||||
}
|
||||
|
||||
const hitY = (minY + maxY) / 2;
|
||||
const hitHeight = Math.max(30, maxY - minY + 30);
|
||||
|
||||
svgContent += `
|
||||
<g class="map-station ${isTransfer ? 'transfer' : ''}" data-code="${primaryCode}" onclick="handleStationClick('${primaryCode}')" style="cursor:pointer">
|
||||
<rect x="${x - 20}" y="${hitY - hitHeight/2}" width="40" height="${hitHeight}" fill="transparent" />
|
||||
${nodesSvg}
|
||||
${labelSvg}
|
||||
</g>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user