Mapbox GL JS Image Overlay Coordinates Precision Issue

问题

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)

回答1:

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.

来源：https://stackoverflow.com/questions/59588048/mapbox-gl-js-image-overlay-coordinates-precision-issue

标签

mapbox