Leaflet地图模糊、瓦片边框及俄英街道名重叠问题求助

核心问题聚焦 #

已知街道名重叠是OpenStreetMap遭遇恶意破坏导致，无需在Leaflet层面处理。以下针对Chrome浏览器独有的地图模糊、瓦片白边/边框可见问题提供解决办法：

具体修复方案 #

1. 修复Chrome渲染导致的模糊 #

Chrome部分版本对高DPI屏幕的渲染优化会导致瓦片模糊，可通过CSS强制调整渲染模式：

#map {
  height: 100vh;
  width: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

或者改用Canvas渲染替代DOM渲染，初始化地图时添加配置：

var map = L.map('map', {
  preferCanvas: true
}).setView([51.505, -0.09], 13);

2. 解决瓦片对齐问题（消除白边） #

瓦片边框可见多因坐标系或高DPI适配问题，调整TileLayer配置：

var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  detectRetina: true, // 适配高DPI屏幕
  tms: false // 匹配OSM瓦片的坐标系规则
}).addTo(map);

3. 排查Chrome浏览器设置 #

• 关闭硬件加速：进入Chrome设置→系统→取消勾选「使用硬件加速模式（如果可用）」，重启浏览器测试；
• 清除图片缓存：打开Chrome设置→隐私和安全→清除浏览数据，仅勾选「图片和文件」，清除后重新加载地图；
• 更新/回退Chrome版本：当前使用的125.0.6422.142可能存在Bug，尝试升级到最新稳定版或回退到上一版本。

4. 替换Leaflet资源源 #

尝试切换到稳定的CDN资源（替代unpkg），避免资源加载异常：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-hZ4R/Ba21lQ075+o3V9sYeU2x2ez1u48b4XaHtVz46l2A46R8KrlH7/lQ0686MHiQ0X2yQ80Z6aNl+9172Lg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-5TIHXf0bKbFhHlww44wW30oAdV6JAwA/5wzhsJyB3f0+828CIfbNn2T84707XEkdUf3k1cL7s5c0U3LlnK6g==" crossorigin="anonymous"></script>

验证步骤 #

修改代码后，在Chrome中打开极简测试页，依次确认：

• 各缩放级别下地图是否清晰无模糊；
• 瓦片之间是否无可见边框/白边；
• 功能正常无其他异常。

内容的提问来源于stack exchange，提问作者Hejya