fix(rail-map): 修复多线路站点坐标计算并优化线路渲染
新增按规范站名分组计算平均Y坐标的逻辑,解决同一站点对应多代码时的位置偏移问题。将SVG线路的直线段替换为贝塞尔曲线提升视觉流畅度,同时简化站点标记和辅助线的绘制代码,移除冗余的排序操作。
This commit is contained in:
+22
-6
@@ -190,10 +190,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
stationYByCanonical = {};
|
stationYByCanonical = {};
|
||||||
|
const ysByCanonical = {};
|
||||||
for (const c of Object.keys(primaryLineByStation)) {
|
for (const c of Object.keys(primaryLineByStation)) {
|
||||||
const li = primaryLineByStation[c];
|
const li = primaryLineByStation[c];
|
||||||
if (li == null) continue;
|
if (li == null) continue;
|
||||||
stationYByCanonical[c] = baseY + li * lineGapY;
|
const canonical = stationCanonicalByCode[c] || c;
|
||||||
|
if (!ysByCanonical[canonical]) ysByCanonical[canonical] = [];
|
||||||
|
ysByCanonical[canonical].push(baseY + li * lineGapY);
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
const allStations = Object.keys(primaryLineByStation);
|
||||||
@@ -229,7 +243,10 @@
|
|||||||
|
|
||||||
let d = `M ${pts[0].x} ${pts[0].y}`;
|
let d = `M ${pts[0].x} ${pts[0].y}`;
|
||||||
for (let i = 1; i < pts.length; i++) {
|
for (let i = 1; i < pts.length; i++) {
|
||||||
d += ` L ${pts[i].x} ${pts[i].y}`;
|
const prev = pts[i-1];
|
||||||
|
const curr = pts[i];
|
||||||
|
const midX = (prev.x + curr.x) / 2;
|
||||||
|
d += ` C ${midX} ${prev.y}, ${midX} ${curr.y}, ${curr.x} ${curr.y}`;
|
||||||
}
|
}
|
||||||
svgContent += `<path d="${d}" fill="none" stroke="${li.color}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />`;
|
svgContent += `<path d="${d}" fill="none" stroke="${li.color}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />`;
|
||||||
}
|
}
|
||||||
@@ -238,11 +255,10 @@
|
|||||||
for (const canonical of Object.keys(stationCodesByCanonical)) {
|
for (const canonical of Object.keys(stationCodesByCanonical)) {
|
||||||
const codes = (stationCodesByCanonical[canonical] || []).filter(code => Number.isFinite(stationYByCanonical[code]));
|
const codes = (stationCodesByCanonical[canonical] || []).filter(code => Number.isFinite(stationYByCanonical[code]));
|
||||||
if (codes.length < 2) continue;
|
if (codes.length < 2) continue;
|
||||||
const ys = codes.map(code => stationYByCanonical[code]).sort((a, b) => a - b);
|
|
||||||
const x = stationXByCanonical[canonical];
|
const x = stationXByCanonical[canonical];
|
||||||
const labelY = ys[ys.length - 1] + 34;
|
const y = stationYByCanonical[codes[0]];
|
||||||
svgContent += `<line x1="${x}" y1="${ys[0]}" x2="${x}" y2="${ys[ys.length - 1]}" stroke="#cbd5e1" stroke-width="12" stroke-linecap="round" opacity="0.98" />`;
|
const labelY = y + 34;
|
||||||
svgContent += `<circle cx="${x}" cy="${(ys[0] + ys[ys.length - 1]) / 2}" r="7" fill="#ffffff" stroke="#111827" stroke-width="3" />`;
|
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 += `<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>`;
|
svgContent += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#334155" font-size="13" font-weight="800">${getStationDisplayName(canonical)}</text>`;
|
||||||
labelShownForCanonical.add(canonical);
|
labelShownForCanonical.add(canonical);
|
||||||
|
|||||||
Reference in New Issue
Block a user