路线地图缩小时密集节点图标不再偏离(批 20)
节点很多又很密集时,地图缩小后有些图标位置会偏离很远: 排布器原来按「屏幕像素中心距」判碰撞,缩小时多真实坐标挤在几像素内, 被固定甩开 56px(低 zoom 下等于数公里),图标明显偏离真实位置。 - makePlacer 碰撞判定从「屏幕像素距离」改为「仅经纬度完全相同(posKey 一致)才偏移」 - 坐标不同但屏幕挨着的密集节点一律零偏移、留在真实位置(不再甩飞) - 往返(同中点)仍沿线段错开,保留去重;调用处传入真实坐标 pos - 补 _page20.php / _map20.js 密集簇+缩小回归,并更新批 14/渲染检查相关断言
This commit is contained in:
@@ -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 ='<div class="route-marker" title="' + n.title.replace(/"/g, '"') + '">'
|
||||
+ (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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user