Mapbox1.x transform:scale 缩放坐标偏移bug修复方案

愤怒的佛手瓜

已于 2022-07-20 16:20:57 修改

阅读量2.6k

点赞数 1

分类专栏： js 文章标签： reactjs

于 2022-07-18 15:08:23 首次发布

本文链接：https://blog.csdn.net/h666000/article/details/125850477

版权

本文详细探讨了地图缩放导致坐标计算错误的问题，提供了三种解决方案：修复mapbox源码中的坐标计算，使用Unfull进行反缩放以保持一致性，以及通过iframe嵌入避免页面加载延迟。重点在于修正坐标算法并分析其优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示，以下是触发问题的步骤：

创建地图
设置transform scale(0.9)在地图容器上，或用fullScreen
用map.resize()更新画布

效果展示：

在这里插入图片描述

解决方法：

方案1：

修复mapbox地图源码-计算事件坐标添加位置的函数

函数在下载的源码以下位置：
在这里插入图片描述

mousePos(el: HTMLElement, e: MouseEvent | WheelEvent): Point {
    const rect = el.getBoundingClientRect();
    return getScaledPoint(el, rect, e);
}

getScaledPoint(el: HTMLElement, rect: ClientRect, e: MouseEvent | WheelEvent | Touch) {
    const scaling = el.offsetWidth === rect.width ? 1 : el.offsetWidth /