EPSG:4326投影下Leaflet加载Mapbox样式底图位置偏移如何解决

问题根因 #

Mapbox 官方公开的瓦片服务默认输出 EPSG:3857（Web墨卡托投影） 格式的瓦片，与你地图实例配置的 EPSG:4326 投影不匹配，直接加载就会出现坐标偏移问题。

解决方案 #

方案1：调整地图投影为EPSG:3857（最简便）

如果没有必须使用EPSG:4326的强制需求，直接修改地图初始化的crs参数即可，不需要调整瓦片加载代码，就能实现坐标正常匹配：

const map = L.map(ID, {
   crs: L.CRS.EPSG3857,
   zoomControl: false,
   center: [34, 108],
   maxZoom: 21,
   minZoom: 3,
   zoom: 3,
});

方案2：适配EPSG:4326投影加载瓦片（保留地图4326配置）

如果你必须保留地图的EPSG:4326投影，修改瓦片层配置，增加适配4326投影的参数即可：

L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=" + mytoken, {
  zIndex: 3,
  maxZoom: 21,
  minZoom: 3,
  crs: L.CRS.EPSG4326,
  tms: true,
  zoomOffset: 0
}).addTo(map);

注意事项 #

• 你提供的原始瓦片加载代码中，URL拼接部分mytoken;多了一个多余的分号，运行前需要删除避免语法报错。
• EPSG:4326投影的瓦片采用TMS切片规则，必须开启tms: true参数才能匹配瓦片的Y轴坐标，否则会出现瓦片上下颠倒、坐标偏移的问题。

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