Mapbox GL JS图像叠加层坐标精度问题 [英] Mapbox GL JS Image Overlay Coordinates Precision Issue

问题描述

将图像叠加层放置在具有4个角坐标的地图上时，我面临Mapbox GL JS的精度问题，与预期位置相距50-250 m.为了得出此结论并发现错误，我们将图像的投影与Leaflet和QGIS进行了比较，它们都显示了相同的图像位置，但是Mapbox GL JS出现了偏移.

I'm facing a precision issue with Mapbox GL JS when placing an image overlay on the map with 4 corners coordinates, there is a shift from the expected position by 50-250 m. To reach this conclusion and find this bug, the projection of the image was compared to Leaflet and QGIS, both of them shows the same position of the image but Mapbox GL JS is showing a shift.

我认为这可能是框架中的错误，需要修复.我正在使用React Mapbox GL JS，并且能够使用普通html文件中的Mapbox GL JS库重新创建此问题.因此，很可能不是由React引起的.

I think this may be a bug in the framework that needs to be fixed. I'm using React Mapbox GL JS and was able to recreate this issue using Mapbox GL JS library within a normal html file. So most probably it's not being caused by React.

要重现此问题，请尝试使用Mapbox，Leaflet和QGIS在地图上叠加图像，然后比较结果.

To recreate the issue try to overlay an image on the map using Mapbox, Leaflet and QGIS and then compare the results.

mapbox-gl-js版本:1.4.0

mapbox-gl-js version: 1.4.0

浏览器:Google Chrome版本79.0.3945.88(正式版本)(64位)

browser: Google Chrome Version 79.0.3945.88 (Official Build) (64-bit)

触发行为的步骤 使用4个坐标将图像叠加层添加到Mapbox GL JS

Steps to Trigger Behavior Add an image overlay to Mapbox GL JS using 4 coordinates

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"
})

Geo在QGIS上使用GDAL Georeferencer以相同的坐标引用相同的图像，并使用QGIS加载生成的GeoTIFF.

Geo reference the same image using GDAL Georeferencer on QGIS with the same coordinates and use QGIS to load the resulting GeoTIFF.

使用Leaflet Distortable Image > https://github.com/publiclab/Leaflet.DistortableImage

Overlay the image using Leaflet Distortable Image https://github.com/publiclab/Leaflet.DistortableImage

比较这三个投影，应该只能在Mapbox投影上并且在y轴上观察到移位.

Compare the 3 projections, a shift shall be observed only with the Mapbox projection and on the y axis most probably.

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

Expected Behavior All of these methods should yield the same results.

实际行为 对于3公里长的图像，Mapbox正在显示一次重大变化，有时可能会长达250米.

Actual Behavior Mapbox is showing a major shift sometimes up to 250 meters for an image with a swath of 3 km.

检查此屏幕截图:(QGIS左，Mapbox中心，小叶向右)

Check this screenshot: (QGIS left, Mapbox center, Leaflet right)

推荐答案

问题确实与投影有关.可以通过坐标精确地对图像进行切片和切块，但是它们必须与要叠加的地图的投影相匹配.对于Mapbox，它使用网络墨卡托，并且必须将图像重新投影到EPSG:3857.

The problem does have to do with projection. Images can be sliced and diced exactly by coordinates but they must match the projection of the map they are being overlaid on. In the case of Mapbox, it uses web mercator and images must be reprojected to EPSG:3857.

GDAL( https://gdal.org/)将图像(例如geoTIF)转换为该投影的实用程序. a>).使用GDAL工具转换图像的命令类似于:

A utility to convert images (such as geoTIF) to this projection is GDAL (https://gdal.org/). A command using GDAL tools to convert an image would be something like :

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

希望这可以清除一切.

Hopefully this clears things up.

这篇关于Mapbox GL JS图像叠加层坐标精度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！