当容器宽度超过 1650px 时，Android Chrome 上的 Mapbox GL 地图会变形

Question

我遇到了 Mapbox GL JS 的问题，特别是它在 Android 版 Chrome 浏览器上的渲染问题。该地图在 Windows 和 macOS 的 Chrome 上运行良好。然而，在 Android 上，当地图容器的宽度超过 1650px 时，我观察到扭曲。

问题描述：

• 环境：Android 上的 Chrome 浏览器（最新版本）
• Mapbox GL JS 版本：3.0（在其他版本中也观察到）
• 预期行为：地图应在所有平台上一致渲染，没有任何失真。
• 实际行为：在 Android Chrome 上，当地图容器的宽度设置为超过 1650px 时，地图显示会失真。 为了更好地说明这个问题，这里有两张截图：

1. 正常渲染（宽度<= 1650px):
2. 渲染扭曲（宽度> 1650px）：

我还创建了一个 Codepen 示例来演示这个问题： [https://codepen.io/cylqinsmoon/pen/Rwvdbyv]

尝试解决：

• 确保 Android 设备上的 Chrome 浏览器已更新。
• 检查了可能影响渲染的 CSS 样式，但没有发现。
• 该问题在各种 Android 设备和版本中都是一致的。 问题：

1. 有人在 Android 的 Chrome 浏览器上遇到过 Mapbox GL JS 类似的渲染问题吗？
2. Mapbox GL JS 是否存在可能导致此问题的已知兼容性问题？
3. 这可能与 Android 上的设备分辨率或像素密度有关吗？

Answer 1

我遇到了类似的问题，并找到了可能适用于这种情况的解决方案。这种方法的灵感来自 MapLibre GL JS (04eebcc) 中的提交，但请记住考虑 MapboxGL 和 MaplibreGL 之间的差异。

1. 调整 Painter 的调整大小方法：

   pixelRatio

   的

   painter

   方法中似乎缺少

   resize

   参数。修改它以包括

   pixelRatio

   :

   resize(width, height, pixelRatio) {
       pixelRatio = pixelRatio || browser.devicePixelRatio || 1;
       // ... rest of the resize method
   }
   

2. Map.js中的更新：

   map.js

   文件需要添加一些内容：
   • 实现

     _overridePixelRatio

     和

     pixelRatio

     参数。
   • 包括目前缺少的

     _containerDimensions

     、

     _getClampedPixelRatio

     和

     getPixelRatio

     方法。

3. 画布调整大小修改：就像在

   painter

   的调整大小方法中一样，

   _resizeCanvas

   也应该处理

   pixelRatio

   ：

   _resizeCanvas(width, height, pixelRatio) {
       // ... handle resizing with pixelRatio
   }
   

4. MapLibre 的调整大小方法：请注意，MapLibre 的

   resize

   方法使用

   this._requestedCameraState?.resize(width, height);

   它不存在于我的地图中，但它的缺失到目前为止还没有导致任何问题。

这些更改应该有助于解决 Android Chrome 上宽度超过 1650 像素的容器的失真问题。建议在不同的环境中测试这些修改以确认其有效性。