Upload folder using huggingface_hub

web/app.js

@@ -453,20 +453,27 @@ function drawScene() {
 }
 
 /* ---------- 重叠边的分离 ----------------------------------------------
- * 同一条街上常常叠着好几条边：桥接边从 A 直连到 B，而 A-B 之间的走廊链
- * 正好也沿着同一条路；不同走廊被合并成同一几何时也会完全重合。叠在一起
- * 后只有最后画的那条可见，颜色就"丢"了一种。
+ * 同一条街上常常叠着好几条边。新策略（merged_policy_0915）之后这更普遍了：
+ * §1 蓝边和 §2 绿边都沿路画，一条绿边往往**只有一段**和某条蓝边重合。
  *
- * 判定用真实几何而不是哈希：沿边 A 采样若干点，量它们到边 B 折线的距离，
- * 若绝大部分点都落在 COINCIDE_TOL 之内，就认为两条边视觉上压在一起。
- * （早先的版本按「中点+角度」分桶，结果在共享节点处首尾相接的相邻边被
- * 误判成重叠，全库 83% 的边都被挪开——那不是重叠，是正常的链式连接。）
+ * 所以不能整条边一起挪。之前那版按「整条边 75% 重合」判定，实测只挪动 6%
+ * 的边，而真实被压住的采样点有 30% ——差的全是部分重合。
  *
- * 同组的边各自沿法线偏移 (i - (n-1)/2) * SEG_SEP，并排显示。
+ * 现在改成**逐点侧移**：
+ *   1. 每条折线按固定间距重采样
+ *   2. 每个采样点去找「附近且走向相近」的其它边的点，凑成一组
+ *   3. 组内按边的下标定序，各自沿法线偏移 (rank - (n-1)/2) * SEP
+ *   4. 沿边做滑动平均，避免分组变化处抖动
+ *
+ * 法线方向按**归一到 [0,180) 的走向**算：同一条路上反向行进的两条边，
+ * 法线必须指向同一侧，否则 rank 0 和 rank 1 会被推到同一边。
  */
-var SEG_SEP = 3.2;          // 相邻两条重合边的间距（raster 单位，400 = 全宽）
-var COINCIDE_TOL = 2.5;     // 视为"压在一起"的垂直距离
-var COINCIDE_FRAC = 0.75;   // 采样点落在容差内的比例门槛
+var SEP = 4.2;            // 相邻两条重合边的间距（raster 单位，400 = 全宽）
+var NEAR_TOL = 3.2;       // 多近算"压在一起"
+var ANG_TOL = 30.0;       // 走向差多少度以内才算同向（度）
+var STEP = 3.0;           // 重采样间距
+var DILATE = 3;           // 把偏移量向两侧扩张几个采样点（见下）
+var TAPER = 9.0;          // 端点附近多少距离内收敛回 0（raster 单位）
 
 function distToSegment(p, a, b) {
   var dx = b[0] - a[0], dy = b[1] - a[1];
@@ -483,82 +490,118 @@ function distToPolyline(p, pts) {
   }
   return best;
 }
-/* 沿折线等距取 n 个点（含两端） */
-function sampleAlong(pts, n) {
-  var segs = [], total = 0;
-  for (var i = 0; i + 1 < pts.length; i++) {
-    var L = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]);
-    segs.push(L); total += L;
-  }
-  if (!total) return [pts[0]];
-  var out = [], step = total / (n - 1);
+function polyLength(pts) {
+  var L = 0;
+  for (var i = 0; i + 1 < pts.length; i++) L += Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]);
+  return L;
+}
+/* 沿折线等距取点，同时给出每点的走向（归一到 [0,180)）。 */
+function resample(pts, step) {
+  var out = [];
+  var total = polyLength(pts);
+  var n = Math.max(2, Math.ceil(total / step) + 1);
+  var segs = [];
+  for (var i = 0; i + 1 < pts.length; i++)
+    segs.push(Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]));
   for (var k = 0; k < n; k++) {
-    var want = Math.min(k * step, total), acc = 0, j = 0;
+    var want = total * k / (n - 1), acc = 0, j = 0;
     while (j < segs.length && acc + segs[j] < want) { acc += segs[j]; j++; }
+    if (j >= segs.length) j = segs.length - 1;
     var t = segs[j] ? (want - acc) / segs[j] : 0;
-    out.push([pts[j][0] + (pts[j + 1][0] - pts[j][0]) * t,
-              pts[j][1] + (pts[j + 1][1] - pts[j][1]) * t]);
+    var a = pts[j], b = pts[j + 1];
+    var ang = Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;
+    ang = ((ang % 180) + 180) % 180;        // 归一：反向行进算同一走向
+    out.push({ x: a[0] + (b[0] - a[0]) * t, y: a[1] + (b[1] - a[1]) * t,
+               ang: ang, s: want });
   }
   return out;
 }
-function coincideFraction(a, b) {
-  var pts = sampleAlong(a, 12);
-  var hit = 0;
-  pts.forEach(function (p) { if (distToPolyline(p, b) <= COINCIDE_TOL) hit++; });
-  return hit / pts.length;
+function angDiff(a, b) {
+  var d = Math.abs(a - b) % 180;
+  return d > 90 ? 180 - d : d;
 }
 
-/* 返回 edgeIndex -> 偏移量。只有真正重合的边才会拿到非零值。 */
-function planOffsets(polys) {
+/* 返回每条边的新折线。不重合的边原样返回。 */
+function separateEdges(polys) {
   var n = polys.length;
-  var parent = [];
-  for (var i = 0; i < n; i++) parent.push(i);
-  function find(x) { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }
-  function join(x, y) { var a = find(x), b = find(y); if (a !== b) parent[b] = a; }
-
-  for (var i = 0; i < n; i++) {
-    if (!polys[i] || polys[i].length < 2) continue;
-    for (var j = i + 1; j < n; j++) {
-      if (!polys[j] || polys[j].length < 2) continue;
-      // 一条短边完全压在长边上时，只有短→长这个方向比例高，取 max
-      var f = Math.max(coincideFraction(polys[i], polys[j]),
-                       coincideFraction(polys[j], polys[i]));
-      if (f >= COINCIDE_FRAC) join(i, j);
-    }
-  }
-  var groups = {};
-  for (var k = 0; k < n; k++) {
-    if (!polys[k] || polys[k].length < 2) continue;
-    var r = find(k);
-    (groups[r] || (groups[r] = [])).push(k);
-  }
-  var shift = {};
-  Object.keys(groups).forEach(function (g) {
-    var list = groups[g];
-    if (list.length < 2) return;               // 不重合的一条都不动
-    list.sort(function (a, b) { return a - b; });   // 稳定：按边的绘制序
-    list.forEach(function (ei, idx) {
-      shift[ei] = (idx - (list.length - 1) / 2) * SEG_SEP;
+  var samples = polys.map(function (p) {
+    return (p && p.length > 1) ? resample(p, STEP) : [];
+  });
+  // 网格索引：只跟邻近格子里的点比，不做 O(总点数^2)
+  var CELL = NEAR_TOL * 2;
+  var grid = {};
+  samples.forEach(function (pts, ei) {
+    pts.forEach(function (q, pi) {
+      var key = Math.floor(q.x / CELL) + ':' + Math.floor(q.y / CELL);
+      (grid[key] || (grid[key] = [])).push([ei, pi]);
     });
   });
-  return shift;
-}
 
-/* 按法线方向平移一条折线。每段单独算法线，拐角处取相邻两段的平均，
-   这样折线偏移后不会在拐点裂开。 */
-function offsetPolyline(pts, dist) {
-  if (!dist || pts.length < 2) return pts;
-  var norms = [];
-  for (var i = 0; i + 1 < pts.length; i++) {
-    var dx = pts[i + 1][0] - pts[i][0], dy = pts[i + 1][1] - pts[i][1];
-    var L = Math.hypot(dx, dy) || 1;
-    norms.push([-dy / L, dx / L]);
-  }
-  return pts.map(function (p, i) {
-    var a = norms[Math.max(0, i - 1)], b = norms[Math.min(norms.length - 1, i)];
-    var nx = (a[0] + b[0]) / 2, ny = (a[1] + b[1]) / 2;
-    var L = Math.hypot(nx, ny) || 1;
-    return [p[0] + nx / L * dist, p[1] + ny / L * dist];
+  var offsets = samples.map(function (pts) { return pts.map(function () { return 0; }); });
+  samples.forEach(function (pts, ei) {
+    pts.forEach(function (q, pi) {
+      // 收集与本点重合的其它边
+      var group = [ei];
+      var cx = Math.floor(q.x / CELL), cy = Math.floor(q.y / CELL);
+      for (var dx = -1; dx <= 1; dx++) for (var dy = -1; dy <= 1; dy++) {
+        var cell = grid[(cx + dx) + ':' + (cy + dy)];
+        if (!cell) continue;
+        for (var t = 0; t < cell.length; t++) {
+          var ej = cell[t][0], pj = cell[t][1];
+          if (ej === ei || group.indexOf(ej) >= 0) continue;
+          var r = samples[ej][pj];
+          if (Math.hypot(r.x - q.x, r.y - q.y) > NEAR_TOL) continue;
+          if (angDiff(r.ang, q.ang) > ANG_TOL) continue;
+          group.push(ej);
+        }
+      }
+      if (group.length < 2) return;
+      group.sort(function (a, b) { return a - b; });    // 确定性：按边的下标
+      var rank = group.indexOf(ei);
+      offsets[ei][pi] = (rank - (group.length - 1) / 2) * SEP;
+    });
+  });
+
+  return polys.map(function (poly, ei) {
+    var pts = samples[ei];
+    if (!pts.length) return poly;
+    var off = offsets[ei];
+    if (!off.some(function (v) { return v !== 0; })) return poly;   // 没被挪
+
+    // 1) 扩张：把每个点的偏移取邻域内绝对值最大的那个。
+    //    直接做滑动平均会把短重合段的偏移摊薄到不起作用——重合只有三四个点时
+    //    平均下来只剩三分之一，等于没挪。扩张先把量保住，过渡放到重合段之外。
+    var dil = off.map(function (_, i) {
+      var best = 0;
+      for (var k = -DILATE; k <= DILATE; k++) {
+        var j = i + k;
+        if (j < 0 || j >= off.length) continue;
+        if (Math.abs(off[j]) > Math.abs(best)) best = off[j];
+      }
+      return best;
+    });
+    // 2) 三点平均，磨圆分组变化处的折角。窗口小到不会再摊薄量级。
+    var sm = dil.map(function (_, i) {
+      var a = 0, c = 0;
+      for (var k = -1; k <= 1; k++) {
+        var j = i + k;
+        if (j >= 0 && j < dil.length) { a += dil[j]; c++; }
+      }
+      return a / c;
+    });
+    // 3) 端点收敛，**必须放在平滑之后**：先收敛再平滑的话，三点平均会把
+    //    邻点的偏移带回端点，边就从节点上脱开了（实测 425 条里脱开 251 条）。
+    //    §1/§2 的边本来就都汇聚到节点，那里不可能也不需要分开。
+    var total = pts[pts.length - 1].s || 1;
+    sm = sm.map(function (v, i) {
+      var d = Math.min(pts[i].s, total - pts[i].s);
+      return d >= TAPER ? v : v * (d / TAPER);
+    });
+    return pts.map(function (q, i) {
+      var nx = -Math.sin(q.ang * Math.PI / 180);
+      var ny = Math.cos(q.ang * Math.PI / 180);
+      return [q.x + nx * sm[i], q.y + ny * sm[i]];
+    });
   });
 }
 
@@ -590,7 +633,8 @@ function drawGraph() {
     }
     return { e: e, costly: costly, road: false, pts: [a, b] };
   });
-  var rank = planOffsets(geo.map(function (g) { return g ? g.pts : []; }));
+  // 逐点侧移：重合的部分被推开，不重合的部分原样
+  var drawn = separateEdges(geo.map(function (g) { return g ? g.pts : []; }));
 
   geo.forEach(function (g, ei) {
     if (!g) return;
@@ -599,35 +643,25 @@ function drawGraph() {
     var isSel = sel && sel.kind === 'edge'
       && sel.key[1] === e.source_label && sel.key[2] === e.target_label;
     var dead = !e.in_graph;
-
-    var shift = rank[ei] || 0;
-    var pts = offsetPolyline(g.pts, shift);
-
-    var el;
-    if (g.road) {
-      el = mk('polyline', {
-        points: pts.map(function (q) { return q[0].toFixed(2) + ',' + q[1].toFixed(2); }).join(' '),
-        fill: 'none', stroke: isSel ? '#fff' : colour,
-        'stroke-width': isSel ? 3 : 1.7, opacity: dead ? .22 : 1,
-        'stroke-linejoin': 'round', 'stroke-linecap': 'round',
-        style: 'cursor:pointer',
-      });
-    } else {
-      el = mk('line', {
-        x1: pts[0][0], y1: pts[0][1], x2: pts[1][0], y2: pts[1][1],
-        stroke: isSel ? '#fff' : colour,
-        'stroke-width': isSel ? 3 : (g.costly ? 2.2 : 1.7),
-        opacity: dead ? .22 : 1,
-        'stroke-dasharray': g.costly ? '6 4' : '',
-        style: 'cursor:pointer',
-      });
-    }
-    // 被挪开的边加一层深色描边，和邻线之间留出视觉缝隙
-    if (shift) el.setAttribute('paint-order', 'stroke');
+    var pts = drawn[ei] || g.pts;
+    var moved = pts !== g.pts;
+
+    // 一律用 polyline：侧移之后连"直线"边也可能变成折线
+    // （两端不重合、中段被推开时，直线会被弯成一个浅弧）
+    var el = mk('polyline', {
+      points: pts.map(function (q) { return q[0].toFixed(2) + ',' + q[1].toFixed(2); }).join(' '),
+      fill: 'none', stroke: isSel ? '#fff' : colour,
+      'stroke-width': isSel ? 3 : (g.costly ? 2.2 : 1.7),
+      opacity: dead ? .22 : 1,
+      'stroke-dasharray': g.costly ? '6 4' : '',
+      'stroke-linejoin': 'round', 'stroke-linecap': 'round',
+      style: 'cursor:pointer',
+    });
     el.onclick = function () { pickEdge(e); };
     var title = mk('title', {});
-    title.textContent = e.source_label + '–' + e.target_label + ' · ' + (e.origin || '')
-      + (shift ? '（与其它边重合，已错开显示）' : '');
+    title.textContent = e.source_label + '–' + e.target_label + ' · ' +
+      (EDGE_LABEL[e.origin] || e.origin || '') +
+      (moved ? '（与其它边重合，已错开显示）' : '');
     el.appendChild(title);
     svg.appendChild(el);
   });