refactor(web): 优化线路图走线为45度和直角转折，并在起终点显示线路名

2026-07-12 09:50:36 +08:00
parent 9ef5d2099e
commit 423a5972fc
4 changed files with 109 additions and 120 deletions
@@ -16,8 +16,8 @@
    "mtimeMs": 1783602619602.658
  },
  "ticket-order.js": {
-    "size": 37866,
-    "mtimeMs": 1783818082616.8108
+    "size": 37477,
+    "mtimeMs": 1783820973442.9248
  },
  "ticket-search.js": {
    "size": 17269,
@@ -3,7 +3,7 @@
  "blog.css": 2,
  "custom-dialog.js": 11,
  "public-status.js": 14,
-  "ticket-order.js": 24,
+  "ticket-order.js": 25,
  "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=24"></script>
+  <script src="/ticket-order.js?v=25"></script>
  <script src="/public-status.js?v=14"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
@@ -55,117 +55,87 @@
      return out;
  };

-  const appendPolylinePoint = (points, x, y) => {
-      const px = Math.round(Number(x) || 0);
-      const py = Math.round(Number(y) || 0);
-      const last = points[points.length - 1];
-      if (last && last.x === px && last.y === py) return;
-      points.push({ x: px, y: py });
-  };
-
-  const buildRoundedOrthogonalPath = (points, radius = 14) => {
-      if (!Array.isArray(points) || points.length === 0) return '';
+  const buildTransitPath = (points, radius = 12) => {
+      if (!points || points.length === 0) return '';
      if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;

-      let d = `M ${points[0].x} ${points[0].y}`;
+      const expanded = [points[0]];
      for (let i = 1; i < points.length; i++) {
          const prev = points[i - 1];
          const cur = points[i];
-          const next = points[i + 1];
+          const dx = cur.x - prev.x;
+          const dy = cur.y - prev.y;
+
+          if (dx === 0 || dy === 0 || Math.abs(dx) === Math.abs(dy)) {
+              expanded.push(cur);
+          } else {
+              const absDx = Math.abs(dx);
+              const absDy = Math.abs(dy);
+              if (absDx > absDy) {
+                  const signX = Math.sign(dx);
+                  const straightLen = absDx - absDy;
+                  expanded.push({ x: prev.x + signX * (straightLen / 2), y: prev.y });
+                  expanded.push({ x: cur.x - signX * (straightLen / 2), y: cur.y });
+                  expanded.push(cur);
+              } else {
+                  const signY = Math.sign(dy);
+                  const straightLen = absDy - absDx;
+                  expanded.push({ x: prev.x, y: prev.y + signY * (straightLen / 2) });
+                  expanded.push({ x: cur.x, y: cur.y - signY * (straightLen / 2) });
+                  expanded.push(cur);
+              }
+          }
+      }
+
+      const cleaned = [expanded[0]];
+      for (let i = 1; i < expanded.length; i++) {
+          const last = cleaned[cleaned.length - 1];
+          const p = expanded[i];
+          if (Math.abs(last.x - p.x) > 0.1 || Math.abs(last.y - p.y) > 0.1) {
+              cleaned.push(p);
+          }
+      }
+
+      let d = `M ${cleaned[0].x} ${cleaned[0].y}`;
+      for (let i = 1; i < cleaned.length; i++) {
+          const prev = cleaned[i - 1];
+          const cur = cleaned[i];
+          const next = cleaned[i + 1];
+
          if (!next) {
              d += ` L ${cur.x} ${cur.y}`;
-              continue;
+              break;
          }

-          const inDx = cur.x - prev.x;
-          const inDy = cur.y - prev.y;
-          const outDx = next.x - cur.x;
-          const outDy = next.y - cur.y;
-          const isCorner = ((inDx === 0 && outDy === 0) || (inDy === 0 && outDx === 0)) && !(inDx === 0 && outDx === 0) && !(inDy === 0 && outDy === 0);
-          if (!isCorner) {
+          const dx1 = cur.x - prev.x;
+          const dy1 = cur.y - prev.y;
+          const len1 = Math.sqrt(dx1*dx1 + dy1*dy1);
+          const dx2 = next.x - cur.x;
+          const dy2 = next.y - cur.y;
+          const len2 = Math.sqrt(dx2*dx2 + dy2*dy2);
+
+          if (len1 < 0.1 || len2 < 0.1) {
              d += ` L ${cur.x} ${cur.y}`;
              continue;
          }

-          const inLen = Math.abs(inDx) + Math.abs(inDy);
-          const outLen = Math.abs(outDx) + Math.abs(outDy);
-          const r = Math.max(0, Math.min(radius, inLen / 2, outLen / 2));
-          const inX = cur.x - Math.sign(inDx) * r;
-          const inY = cur.y - Math.sign(inDy) * r;
-          const outX = cur.x + Math.sign(outDx) * r;
-          const outY = cur.y + Math.sign(outDy) * r;
-          d += ` L ${inX} ${inY} Q ${cur.x} ${cur.y} ${outX} ${outY}`;
+          const cross = dx1 * dy2 - dy1 * dx2;
+          if (Math.abs(cross) < 0.1) {
+              d += ` L ${cur.x} ${cur.y}`;
+              continue;
+          }
+
+          const r = Math.min(radius, len1 / 2, len2 / 2);
+          const startX = cur.x - (dx1 / len1) * r;
+          const startY = cur.y - (dy1 / len1) * r;
+          const endX = cur.x + (dx2 / len2) * r;
+          const endY = cur.y + (dy2 / len2) * r;
+
+          d += ` L ${startX} ${startY} Q ${cur.x} ${cur.y} ${endX} ${endY}`;
      }
      return d;
  };

-  function isTransferCode(code) {
-      const normalized = String(code || '').trim();
-      if (!normalized) return false;
-      const canonical = stationCanonicalByCode[normalized] || normalized;
-      const codes = stationCodesByCanonical[canonical] || [];
-      return codes.length >= 2 || stationTransfer.has(normalized);
-  }
-
-  function buildLinePath(points, yLine) {
-      if (!Array.isArray(points) || points.length === 0) return '';
-      const poly = [];
-      appendPolylinePoint(poly, points[0].x, points[0].y);
-      for (let i = 1; i < points.length; i++) {
-          const prev = points[i - 1];
-          const cur = points[i];
-          const prevOnLine = Math.abs(prev.y - yLine) < 0.5;
-          const curOnLine = Math.abs(cur.y - yLine) < 0.5;
-
-          if (prev.x === cur.x || prev.y === cur.y) {
-              appendPolylinePoint(poly, cur.x, cur.y);
-              continue;
-          }
-
-          if (prevOnLine && curOnLine) {
-              appendPolylinePoint(poly, cur.x, cur.y);
-          } else if (prevOnLine && !curOnLine) {
-              appendPolylinePoint(poly, cur.x, yLine);
-              appendPolylinePoint(poly, cur.x, cur.y);
-          } else if (!prevOnLine && curOnLine) {
-              appendPolylinePoint(poly, prev.x, yLine);
-              appendPolylinePoint(poly, cur.x, cur.y);
-          } else {
-              appendPolylinePoint(poly, prev.x, yLine);
-              appendPolylinePoint(poly, cur.x, yLine);
-              appendPolylinePoint(poly, cur.x, cur.y);
-          }
-      }
-      return buildRoundedOrthogonalPath(poly, 14);
-  }
-
-  function buildRoutePath(points, codes) {
-      if (!Array.isArray(points) || points.length === 0) return '';
-      const poly = [];
-      appendPolylinePoint(poly, points[0].x, points[0].y);
-      for (let i = 1; i < points.length; i++) {
-          const prev = points[i - 1];
-          const cur = points[i];
-          const prevTransfer = isTransferCode(codes?.[i - 1]);
-          const curTransfer = isTransferCode(codes?.[i]);
-
-          if (prev.x === cur.x || prev.y === cur.y) {
-              appendPolylinePoint(poly, cur.x, cur.y);
-              continue;
-          }
-
-          if (!prevTransfer && curTransfer) {
-              appendPolylinePoint(poly, cur.x, prev.y);
-          } else if (prevTransfer && !curTransfer) {
-              appendPolylinePoint(poly, prev.x, cur.y);
-          } else {
-              appendPolylinePoint(poly, prev.x, cur.y);
-          }
-          appendPolylinePoint(poly, cur.x, cur.y);
-      }
-      return buildRoundedOrthogonalPath(poly, 16);
-  }
-
  async function loadMap() {
      try {
          const res = await fetch('/api/public/fares/map/light');
@@ -291,12 +261,9 @@
          }
          
          // Build SVG
-          const legendW = 210;
-          const legendX = 16;
-          const legendSwatchW = 22;
-          const legendTextX = legendX + legendSwatchW + 10;
-          const startX = legendW + 90;
-          const baseY = 44;
+          const legendW = 10;
+          const startX = 140;
+          const baseY = 80;
          const lineGapY = 92;
          const minGapX = 78;

@@ -364,28 +331,48 @@
              }
          }

+          const labelPlacements = {};
+          const placeLabel = (x, y, isStart, name, color) => {
+              const key = `${x},${y},${isStart ? 'left' : 'right'}`;
+              const count = labelPlacements[key] || 0;
+              labelPlacements[key] = count + 1;
+              
+              const nameLen = name.length * 13 + 16;
+              const yOffset = count * 30 - 12; // stack vertically, center on point initially
+              
+              let lx, textX;
+              if (isStart) {
+                  lx = x - 28 - nameLen;
+                  textX = lx + nameLen / 2;
+              } else {
+                  lx = x + 28;
+                  textX = lx + nameLen / 2;
+              }
+              
+              return `<rect x="${lx}" y="${y + yOffset}" width="${nameLen}" height="24" rx="12" fill="${color}" />` +
+                     `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">${name}</text>`;
+          };
+
          let svgContent = '';
-          const drawnLegends = new Set();

          for (const li of lineStops) {
-              const yLine = baseY + li.idx * lineGapY;
-              
-              if (!drawnLegends.has(li.idx)) {
-                  svgContent += `<rect x="${legendX}" y="${yLine-10}" width="${legendSwatchW}" height="10" rx="5" fill="${li.color}" />`;
-                  svgContent += `<text x="${legendTextX}" y="${yLine-1}" fill="#e5e7eb" font-size="16" font-weight="800">${li.name}</text>`;
-                  drawnLegends.add(li.idx);
-              }
-
              if (li.stops.length >= 2) {
                  const pts = li.stops.map(code => {
                      const canonical = stationCanonicalByCode[code] || code;
                      return {
                          x: stationXByCanonical[canonical] || 0,
-                          y: stationYByCanonical[code] ?? yLine
+                          y: stationYByCanonical[code] ?? (baseY + li.idx * lineGapY)
                      };
                  });
-                  const d = buildLinePath(pts, yLine);
+                  
+                  const d = buildTransitPath(pts, 16);
                  svgContent += `<path d="${d}" fill="none" stroke="${li.color}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />`;
+                  
+                  // Add line name labels at ends
+                  const pStart = pts[0];
+                  const pEnd = pts[pts.length - 1];
+                  svgContent += placeLabel(pStart.x, pStart.y, true, li.name, li.color);
+                  svgContent += placeLabel(pEnd.x, pEnd.y, false, li.name, li.color);
              }
          }

@@ -413,7 +400,7 @@
                  markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="#334155" stroke-width="2.25" />`;
              }

-              const preferTop = isTransfer || (i % 2 === 0 && y > baseY + 20);
+              const preferTop = isTransfer || (i % 2 === 0 && y >= baseY + 20);
              const labelY = preferTop ? (y - 22) : (y + 30);
              const labelClass = preferTop ? 'station-label-top' : 'station-label-bottom';
              let labelSvg = '';
@@ -436,7 +423,7 @@

          const allX = Object.values(stationXByCanonical);
          const maxX = allX.length > 0 ? Math.max(...allX) : 0;
-          const width = Math.max(560, maxX + 120);
+          const width = Math.max(800, maxX + 180);
          const height = Math.max(260, baseY + currentLineIdx * lineGapY + 60);
          mapContainer.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${svgContent}</svg>`;
          
@@ -603,7 +590,7 @@
      const group = document.createElementNS(ns, 'g');
      group.setAttribute('class', 'route-overlay-group');

-      const pathData = buildRoutePath(points, currentRoute);
+      const pathData = buildTransitPath(points, 16);
      if (!pathData) return;

    const glow = document.createElementNS(ns, 'path');
@@ -633,9 +620,9 @@
        totalDist += Math.sqrt(dx * dx + dy * dy);
    }

-    const speed = 100; // pixels per second
+    const speed = 150; // pixels per second
    const duration = Math.max(1, totalDist / speed);
-    const numArrows = Math.max(1, Math.floor(duration / 0.7)); // one arrow approx every 0.7s
+    const numArrows = Math.max(1, Math.floor(duration / 0.8));
    const interval = duration / numArrows;

    for (let i = 0; i < numArrows; i++) {
@@ -655,6 +642,8 @@
        animateMotion.setAttribute('path', pathData);
        animateMotion.setAttribute('rotate', 'auto');
        animateMotion.setAttribute('begin', `-${i * interval}s`);
+        // Use keyPoints/keyTimes to ensure constant speed along the path
+        animateMotion.setAttribute('calcMode', 'linear');

        arrowG.appendChild(arrowPath);
        arrowG.appendChild(animateMotion);