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

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

1. 创建地图

2. 设置transform scale(0.9)在地图容器上，或用fullScreen

3. 用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 / rect.width;
    return new Point(
        (e.clientX - rect.left) * scaling,
        (e.clientY - rect.top) * scaling
    );
}

一张图描述以上代码返回的坐标计算

以上的canvas元素如果进行缩小那rect.left和el.clientLeft中间会有空出空白空间没法计算得到的point坐标是错误的。

解决思路：

把point变成鼠标指针相对于目标节点内边位置的 X和Y 坐标

mousePos = function (el: HTMLElement, e: MouseEvent | WheelEvent) {
    e = e.touches ? e.touches[0] : e;
    return new Point(
        e.offsetX,
        e.offsetY
    );
};

方案2：

用Unfull进行反缩放

效果缺点：左侧是按高保真设计样式，右侧反缩放不能和高保真保持一样，需要计算缩放值

方案3：

用iframe进行嵌入

效果缺点：iframe会阻塞页面加载时间