Mapbox GL JS图像叠加坐标精度问题

在地图上放置带有4个角坐标的图像覆盖时，我面临Mapbox GL JS的精度问题，与预期位置的偏移为50-250米。为了得出这一结论并发现这一缺陷，将图像的投影与传单和QGIS进行了比较，两者都显示了图像的相同位置，但Mapbox GL JS显示了偏移

我认为这可能是框架中的一个bug，需要修复。我正在使用React Mapbox GL JS，并且能够在普通html文件中使用Mapbox GL JS库重新创建此问题。所以很可能这不是由反应引起的

若要重新创建问题，请尝试使用Mapbox、传单和QGIS在地图上覆盖图像，然后比较结果

mapbox gl js版本：1.4.0

浏览器：Google Chrome 79.0.3945.88版（官方版本）（64位）

触发行为的步骤 使用4个坐标向Mapbox GL JS添加图像覆盖

map.addSource("imageTest", {
"type": "image",
"url": "/DIR/TO/IMAGE",
"coordinates": [
    [LON1,LAT1],
    [LON2,LAT2],
    [LON3,LAT3],
    [LON4,LAT4]
]
})

map.addLayer({
"id": "overlay",
"source": "imageTest",
"type": "raster"
})

使用QGIS上具有相同坐标的GDAL地理参照器对相同图像进行地理参照，并使用QGIS加载生成的GeoTIFF

使用单张扭曲图像覆盖图像

比较3个投影，应仅在地图盒投影和y轴上观察位移

预期行为 所有这些方法都应该产生相同的结果

实际行为 地图盒显示了一个大的移动，有时对于一幅3公里的图像，移动可达250米

检查此屏幕截图：（QGIS左侧，地图框中心，传单右侧）

---

这个问题确实与投影有关。图像可以精确地按坐标进行切片和切分，但它们必须与所覆盖地图的投影相匹配。对于Mapbox，它使用web mercator，图像必须重新投影到EPSG:3857

将图像（如geoTIF）转换为此投影的实用程序是GDAL（）。使用GDAL工具转换图像的命令类似于：

gdalwarp -t_srs EPSG:3857 input.tif input-projected.tif

---

希望这能把事情弄清楚

谢谢你的回答，大卫。我正在尝试使用Mapbox GL JS图像覆盖投影数千幅JPEG图像，因此将JPEG图像转换为GTiff图像，然后将其扭曲为Web Mercator EPSG:3857对于我的用例来说是没有效率的。您知道如何从mapbox gl js端而不是图像端修复此问题吗？我相信图像叠加以EPSG:4326 lon，lat作为输入，并将其投影到Web Mercator，然后将图像投影到地图上，对吗？@laithalzyud如果我正确理解您的问题，您在地图盒一侧无法进行任何更正。它必须是3857，否则会有问题。Mapbox不会动态扭曲图像。当我第一次遇到这个问题时，我尝试了一切，直到我知道必须在3857年完成，很遗憾。您是否只需要一次性转换1000张图像？如果是这样，脚本可以为您执行一次。您可以使用imagemagick帮助您使用GDAL来完成几乎所有您想要完成的事情。我很想看看你的问题。我使用的是原始航空图像，我有四个角的坐标，由一个经度，纬度格式的算法生成。我使用传单扭曲图像（）和QGIS投影这些图像。两者都显示了预期的图像位置，并且彼此相似。但当使用Mapbox GL JS时，与之前的地图相比，有50-250米的偏移。Mapbox中的图像覆盖采用图像和4 lon，lat坐标，并在库中进行墨卡托投影。我认为他们如何使用WebGL存在一个问题。请查看我添加的屏幕截图，其中显示了图像是如何移动的，以便更好地了解情况。