diff --git a/templates/activities/show.php b/templates/activities/show.php index 62982cb..8bb7779 100644 --- a/templates/activities/show.php +++ b/templates/activities/show.php @@ -193,17 +193,16 @@ require dirname(__DIR__) . '/comments/_block.php'; window.__routeMap = map; var overlays = []; // 当前画上去的所有覆盖物;地理编码补点后整体重画 - /* ── 防重合(批 15 改法)──────────────────────────────────── - 两类重合,治法不同: - ① 往返(A→B 与 B→A 是同一段):**线就让它重合** —— 把两段线左右错开画成 - 双向车道,偏移量大、看着像画错了;真正的诉求只是「两枚图标别叠在一起」。 - 所以只把图标沿这条线**前后排开**,看上去就是同一条路上跑了两趟。 - ② 距离很近的地点(相差几公里):坐标不同,但"看全国"的缩放级别下像素位置 - 几乎一致 → 也各自沿自己那条线让开。 - 位移方向一律取**线段本身的屏幕方向**(不是固定往右挪),线段太短装不下时 - 才退到法线、再退到水平。判定仍按**屏幕像素**:坐标不同但屏幕上挨着的情况, - 比坐标字符串没用(批 14 实测「中央大街/松花江」坐标差几公里照样叠 34px)。 - 注意:错开只改「怎么画」,不改数据 —— inPath / prevEnd 仍用原始坐标。 */ + /* ── 防重合(批 15 改法,批 20 收紧)───────────────────────── + 只处理「经纬度完全相同」的重合,且只挪图标、不挪线、不改数据: + ① 往返(A→B 与 B→A 是同一段):两段线重合(本就该重合),但两枚图标会 + 叠在同一中点 → 沿这条线**前后排开**,看上去就是同一条路上跑了两趟。 + ② 坐标不同、只是屏幕上挨着的密集节点(缩小时尤甚):**不再让开**, + 一律留在真实经纬度上。批 20 之前按屏幕像素距离判碰撞、把挨着的标记 + 各甩 56px(低 zoom 下等于数公里),导致缩小时图标明显偏离真实位置。 + 判定从「屏幕像素中心距」改为「posKey 经纬度字符串是否相同」:只有 + 完全相同的坐标才偏移,否则零偏移。位移方向取线段屏幕方向,太短则退法线、再水平。 + 错开只改「怎么画」,不改数据 —— inPath / prevEnd 仍用原始坐标。 */ var MARK_W = 46; // 碰撞判定:圆标直径 40 + 6px 间隙(按中心距判,见下面的排布器) var STEP = MARK_W + 10; // 让开一步 = 56px(圆标净间隙 16px,两枚挨着也分得清) @@ -243,32 +242,29 @@ require dirname(__DIR__) . '/comments/_block.php'; return d; }; } - /** 贪心排布:撞上了就沿**这段线**的方向让开(图标仍排在这条线上), - 线太短装不下再走法线、最后水平兜底。返回像素偏移 {x, y}。 */ + /** 排布:只有「经纬度完全相同」的标记才偏移(批 20 收紧)。 + 坐标不同 → 一律零偏移,留在真实位置,不再按屏幕像素甩开。 + 同坐标重复(如往返中点)沿这段线前后排开,线太短走法线、再水平兜底。 */ function makePlacer() { - var placed = []; // 已占用的屏幕坐标(容器像素) - /* 图标是圆的(直径 40),按**中心距**判碰撞比按矩形准: - 斜着挪 52px 时 x 只差 31、y 只差 42,矩形判定会说「还重叠」, - 于是白挪一步(两枚图标被拉到 104px 远,看着像没关系)。 */ - function hit(x, y) { - for (var j = 0; j < placed.length; j++) { - var q = placed[j]; - if (Math.hypot(x - q.x, y - q.y) < MARK_W) return true; - } - return false; - } + var seen = {}; // posKey(realCoord) -> 已在该坐标放置的标记数 return { - place: function (base, dir) { - /* 沿线最多挪到快到端点为止 —— 挪出线段就不再是「在这条线上」了 */ + place: function (dir, pos) { + var key = posKey(pos); + var n = seen[key] || 0; + if (n === 0) { // 该坐标第一枚:原地放,不偏移 + seen[key] = 1; + return { x: 0, y: 0 }; + } + /* 同坐标重复:沿这段线让开(图标仍排在这条线上) */ var maxAlong = Math.max(0, dir.len * 0.45 - MARK_W / 2); - var cand = [{ x: 0, y: 0 }]; + var cand = []; var k, step, sg; for (k = 1; k <= 4; k++) { // ① 沿线前后交替(首选) step = Math.ceil(k / 2) * STEP; sg = (k % 2 === 1) ? 1 : -1; if (step <= maxAlong) cand.push({ x: dir.x * step * sg, y: dir.y * step * sg }); } - for (k = 1; k <= 4; k++) { // ② 线太短:改走法线(少量) + for (k = 1; k <= 4; k++) { // ② 线太短:改走法线 step = Math.ceil(k / 2) * STEP; sg = (k % 2 === 1) ? 1 : -1; cand.push({ x: -dir.y * step * sg, y: dir.x * step * sg }); @@ -278,17 +274,13 @@ require dirname(__DIR__) . '/comments/_block.php'; sg = (k % 2 === 1) ? 1 : -1; cand.push({ x: step * sg, y: 0 }); } - /* cand[0] 是「原地不动」,一样要先判它:跳过去从 cand[1] 开始挑, - 第一枚标记也会被无谓地挪开一步(两枚本来该挨着 52px 的变成 104px)。 */ - var pick = null; - for (var i = 0; i < cand.length; i++) { - if (!hit(base.x + cand[i].x, base.y + cand[i].y)) { pick = cand[i]; break; } - } - if (!pick) pick = cand[0]; // 全都撞:退回原地,总比乱飞好 - placed.push({ x: base.x + pick.x, y: base.y + pick.y }); + /* 第 n 次重复取第 n 个候选(跳过 cand[0]=原地),顺着线铺开; + 候选用尽就取最后一个,总比乱飞好 */ + var pick = cand.length ? cand[Math.min(n, cand.length - 1)] : { x: 0, y: 0 }; + seen[key] = n + 1; return pick; }, - reset: function () { placed = []; }, + reset: function () { seen = {}; }, }; } @@ -304,7 +296,7 @@ require dirname(__DIR__) . '/comments/_block.php'; var hopPath = []; // 节点之间:上一站到达地 → 下一站出发地(虚线) var prevEnd = null; var segDir = makeSegDir(); // 线段在屏幕上的方向:图标沿它排队 - var placer = makePlacer(); // 标记按屏幕像素排布,撞上就挪开 + var placer = makePlacer(); // 标记排布:仅同坐标才偏移,否则留真实位置(批 20) var dotSeen = {}; // 到达地红点:同一点位只画一个 route.forEach(function (n, i) { @@ -325,19 +317,14 @@ require dirname(__DIR__) . '/comments/_block.php'; 都不剩(批 11 上线后踩的坑,光秃秃地图就是它)。 */ var pos = markerPos(n); if (pos) { - /* 先问地图「这个经纬度现在在屏幕哪个像素上」,再和已放的标记比距离: - 坐标不同但屏幕位置挨着(几公里的两个点、或往返的中点)都要挪开 */ - var base = null; - try { - base = map.lngLatToContainer(new AMap.LngLat(pos[0], pos[1])); - } catch (e) { - base = null; - } - /* 有整段线就沿这条线让开(前后排成一列),只有一头时退化成水平 */ + /* 只把「经纬度完全相同」的标记(如往返中点)沿各自线段错开; + 坐标不同则一律留在真实位置,不再按屏幕像素甩开 —— 否则节点 + 密集、缩小时多枚标记会被甩出 56px(低 zoom 下=数公里), + 图标明显偏离真实坐标(批 20)。 */ var dir = (s && en) ? segDir([s.lng, s.lat], [en.lng, en.lat]) : { x: 1, y: 0, len: 0 }; - var off = base ? placer.place(base, dir) : { x: 0, y: 0 }; + var off = placer.place(dir, pos); var html ='
' + (n.img @@ -351,7 +338,7 @@ require dirname(__DIR__) . '/comments/_block.php'; anchor: 'center', map: map, }; - /* 撞上了就沿这条线挪开 —— 用像素偏移,谁也不挡谁 */ + /* 同坐标的标记才沿这条线挪开 —— 用像素偏移,谁也不挡谁 */ if (off.x !== 0 || off.y !== 0) { opts.offset = new AMap.Pixel(off.x, off.y); }