leaflet 瓦片图预览有白线问题

503 阅读1分钟

前段时间有个项目需要使用离线地图的方案,然后找了很多方案,最终确定了使用前端使用leafletjs + 后端(谷歌)离线瓦片图层的方案。

本来一切都进行的很顺利,项目部署上线运行了一个多月,甲方准备验收了,然后反馈说我们的地图很白线,不给验收。一开始还以为甲方在搞事情,卡着不让验收。

image.png

远程上去打开项目一看,结果还真的有!!!

image.png

这脸打的啪啪响

image.png

最后记录一下解决方法吧 github.com/Leaflet/Lea…

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

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