天地图作为底图时,地图拖动后,popup位置会偏移

[biorgg]

问题描述

天地图作为底图时,地图拖动后,popup位置会偏移

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions[bot]]

hi @biorgg, welcome!

[github-actions[bot]]

Hi @biorgg, Please star this repo if you find it useful! Thanks :star:! 你好～ @biorgg 🌟 如果这个仓库对你有帮助，可以给我们点个star支持一下～你的支持对我们来说是最大的鼓励，感谢你的支持与点赞 🌟

[guangze233]

我遇到了同样的问题。 产生方式：通过 import { TMap } from "@antv/l7-maps" 集成天地图 ，见图表演示·天地图；PointLayer+LayerPopup展示点数据和popup； 错误效果：初次加载天地图和点数据时，popup位置正常，地图拖动后,popup位置会偏移。 解决方式：通过瓦片图层的方式来加载天地图瓦片（import { Map } from "@antv/l7-maps";），见使用教程·天地图

[yuankc]

我也遇到这个问题，而且地图放大位置偏移的更厉害，并且点击某个坐标弹出popup位置也有问题，天地图兼容上还是不如高德

[ToninZhao]

我遇到了同样的问题。 产生方式：通过 import { TMap } from "@antv/l7-maps" 集成天地图 ，见图表演示·天地图；PointLayer+LayerPopup展示点数据和popup； 错误效果：初次加载天地图和点数据时，popup位置正常，地图拖动后,popup位置会偏移。 解决方式：通过瓦片图层的方式来加载天地图瓦片（import { Map } from "@antv/l7-maps";），见使用教程·天地图

这个方法能解决问题，但是放大地图后，地图显示的很模糊，体验较差。希望官方早点解决移动天地图底图popup错位的问题。

[xyh-994]

试试加下面这个样式 .l7-control-container+div{ transform: none !important; } 我目前用下来LayerPopup、PolygonLayer 、PointLayer 这三东西都没什么大问题 antv/l7: 2.23.0 天地图v4.0

[shunshunyue]

我也遇到了 我发现天地图popup 使用的是map.lngLatToContainerPoint ，但是这个方法没有正确计算拖动后translate3d的偏移

解决方法： 1.通过原始lngLatToContainerPoint 方法获取像素值 const layerPoint = scene?.map.lngLatToContainerPoint(lngLat); 2.获取marker 的偏移元素 const el = document.querySelector('#tdt-L7-marker') as HTMLElement; 3.获取style的translate3d值 ` const style = getComputedStyle(el ); const transform = style.transform || (style as any).webkitTransform;

if (transform === 'none' || !transform) {
  return { x: 0, y: 0 };
}

// 匹配 matrix(a, b, c, d, tx, ty)
const matrixMatch = transform.match(/matrix\((.+)\)/);
if (matrixMatch && matrixMatch[1]) {
  const parts = matrixMatch[1].split(',').map((s) => parseFloat(s.trim()));
  return { x: parts[4], y: parts[5] };
}

// 匹配 translate(tx, ty) 或 translate3d(tx, ty, tz)
const translateMatch = transform.match(/translate(?:3d)?\(([^,]+),([^,]+)/);
if (translateMatch) {
  return {
    x: parseFloat(translateMatch[1]),
    y: parseFloat(translateMatch[2]),
  };
}

return { x: 0, y: 0 };`

4.重新计算 left 和top ` const x = layerPoint.x - offset.x;

 const y = layerPoint.y - offset.y;
 const popupEl = window.document.querySelector('.l7-popup') as HTMLElement;
if (popupEl && x && y) {
  popupEl.style.left = `${x}px`;
  popupEl.style.top = `${y}px`;
}`