Mapbox瓦片图在React Leaflet中加载显示异常是什么原因？

问题原因 #

• 你当前使用的mapbox.mapbox-streets-v8属于矢量瓦片数据集，本身不存储可直接渲染的图片资源，你按照栅格瓦片规则请求jpg格式资源，返回的内容无法正常解析为图片，就会出现瓦片异常的问题。
• 瓦片坐标系不匹配：Mapbox默认使用TMS瓦片规范，Y轴坐标和Leaflet默认的XYZ规范是反转的，就算是加载栅格瓦片如果没有配置反转参数，也会出现瓦片错位、显示错乱的问题。
• 样式表无法加载是因为矢量瓦片本身仅包含地理要素数据，不携带样式信息，需要配套的样式规则单独解析渲染，原生Leaflet的TileLayer组件不支持矢量瓦片的样式解析逻辑，自然无法加载样式。
• 你使用v4版本显示效果稍好，是因为mapbox-streets-v4是Mapbox早期的栅格瓦片数据集，本身就是图片格式，但你没有配置Y轴反转参数，所以还是会有显示异常的问题。

修复方案 #

方案1：使用官方栅格瓦片接入（无额外依赖，实现简单） #

如果不需要自定义地图样式，仅需要快速加载Mapbox官方街道图，直接使用栅格瓦片端点并适配坐标系即可：

1. 替换瓦片URL为官方栅格样式端点，参考模板如下：

https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}@2x?access_token=你的AccessToken

2. 在React Leaflet的TileLayer组件中添加tms={true}属性，开启Y轴坐标反转，适配Mapbox的瓦片规范。

方案2：加载矢量瓦片（支持自定义样式） #

如果需要使用v8等矢量瓦片数据集、自定义地图样式，需要引入适配依赖实现矢量瓦片解析：

1. 安装@maplibre/maplibre-gl-leaflet适配库，该库兼容性、维护性都更优。
2. 使用适配库提供的图层组件替代原生TileLayer，传入矢量瓦片地址和对应的样式配置，即可正常解析渲染矢量瓦片和自定义样式。

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