解决 Leaflet 地图出现 1px 白线问题

在开发的 app，内嵌的 h5 中使用了 Leaflet 开发地图，最后被提了 Bug，说地图会出现白线问题，这样：

我一直以为这是正常的，毕竟地图底层就是一块块图片拼接的，因为分辨率问题出现边缘白线，所以就忽略了。但是测试说这个是 Bug，我只能尝试解决一下。

上网搜索了一番发现不是个例，最后还是在 Leaflet 的 gtihub Issues 上找到了一个临时解决方案，https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739 。

说起来也有些离谱，这个人 2015 年就给出了这个临时解决方案，但是在 2024 年我还是遇到了这个问题。

为了便于项目中调用,我给这个方案封装了一下：

// 解决 leaflet 地图 1px 白线问题
export const resolveLeaflet1pxLine = (L)=>{
  const originalInitTile = L.GridLayer.prototype._initTile;
  L.GridLayer.include({
    _initTile: function(tile) {
      originalInitTile.call(this, tile);

      let tileSize = this.getTileSize();

      tile.style.width = tileSize.x + 1 + "px";
      tile.style.height = tileSize.y + 1 + "px";
    }
  });
}

使用时：

import { resolveLeaflet1pxLine } from "@/utils";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
resolveLeaflet1pxLine(L);