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

huangapple go评论45阅读模式
英文:

Mapbox GL JS Image Overlay Coordinates Precision Issue

问题

我在使用Mapbox GL JS在地图上叠加图像时遇到了精度问题,这个问题涉及到使用4个角坐标来定位图像叠加,与预期位置相比存在50-250米的偏移。为了得出这个结论并找到这个bug,图像的投影与Leaflet和QGIS进行了比较,它们两者都显示图像的相同位置,但是Mapbox GL JS显示了一个偏移。

我认为这可能是框架中需要修复的bug。我正在使用React Mapbox GL JS,并且能够在普通的HTML文件中使用Mapbox GL JS库重现此问题。因此,很可能不是由React引起的。

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

mapbox-gl-js版本:1.4.0

浏览器:Google Chrome版本79.0.3945.88(官方版本)(64位)

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

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。

使用Leaflet Distortable Image https://github.com/publiclab/Leaflet.DistortableImage 叠加图像

比较这3种投影,只有Mapbox投影可能会在y轴上出现偏移。

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

实际行为
Mapbox有时会显示一个重大的偏移,最多可达250米,对于一幅3公里的图像。

查看这个截图:(QGIS左,Mapbox中,Leaflet右)
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.

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.

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 version: 1.4.0

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

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 reference the same image using GDAL Georeferencer on QGIS with the same coordinates and use QGIS to load the resulting GeoTIFF.

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

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.

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

Check this screenshot: (QGIS left, Mapbox center, Leaflet right)
Mapbox GL JS 图像叠加坐标精度问题

答案1

得分: 2

问题确实与投影有关。图像可以通过坐标精确切割,但它们必须与它们要叠加在上面的地图的投影匹配。在Mapbox的情况下,它使用Web墨卡托投影,图像必须重新投影到EPSG:3857。

一个用于将图像(如geoTIF)转换到这个投影的实用工具是GDAL(https://gdal.org/)。使用GDAL工具来转换图像的命令可能类似于:

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

希望这能解决问题。

英文:

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.

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.

huangapple
  • 本文由 发表于 2020年1月4日 13:03:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/59588048.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定