Mapbox GL JS ImageSource 坐标错误答案

【问题标题】：Mapbox GL JS ImageSource wrong coordinatesMapbox GL JS ImageSource 坐标错误
【发布时间】：2019-05-05 19:04:50
【问题描述】：

我正在努力将图像正确定位到我的地图上。我正在为我的（实时）图像使用以下 URL 之一：

我尝试根据这个example添加图像源。使用这些坐标：

[2.0714827302884133, 55.07980923136505],
[15.72075796095801, 55.07980923136505],
[15.72075796095801, 47.14423415016973],
[2.0714827302884133, 47.14423415016973]

问题是图像未 100 % 正确对齐，但略有偏移/拉伸。我使用墨卡托投影阅读了有关 Mapbox 的一些内容，但无法处理其他内容？这就是为什么上面有三个不同的 URL，但它们都失败了。接下来我尝试像这样转换我的坐标：

var westLongitude = 2.0714827302884133;
var eastLongitude = 15.72075796095801;  
var southLatitude = 47.14423415016973;
var northLatitude = 55.07980923136505;  

var topLeft = { lng: westLongitude, lat: northLatitude};
var mTopLeft = mapboxgl.MercatorCoordinate.fromLngLat(topLeft, 0).toLngLat();

var topRight = { lng: eastLongitude, lat: northLatitude};
var mTopRight = mapboxgl.MercatorCoordinate.fromLngLat(topRight, 0).toLngLat();

var bottomRight = { lng: eastLongitude, lat: southLatitude};
var mBottomRight = mapboxgl.MercatorCoordinate.fromLngLat(bottomRight, 0).toLngLat();

var bottomLeft = { lng: westLongitude, lat: southLatitude};
var mBottomLeft = mapboxgl.MercatorCoordinate.fromLngLat(bottomLeft, 0).toLngLat();

var mercatorCoordinates = [[mTopLeft.lng, mTopLeft.lat], [mTopRight.lng, mTopRight.lat], [mBottomRight.lng, mBottomRight.lat], [mBottomLeft.lng, mBottomLeft.lat]];

但是，这也没有正确对齐图像。我想，我使用了错误的坐标。知道怎么做吗？

非常感谢。

下面是代码（请将雷达盲点（灰色）的位置与下图进行比较以查看偏移量）：js fiddle

雷达盲点（粉红色）必须位于以下位置：

【问题讨论】：

你能创建一个 jsfiddle 或 codebin 来显示图像拉伸/移位的问题吗？
喜欢这个@SteveBennett？我添加了一个 js 小提琴和一个图像。谢谢
顺便说一句，使用 Mapbox 的 macOS API 我有同样的错位。
嗯，我不知道。使用 CRS:84 版本时，我没有看到任何明显错误。预测的问题，但我不知道是什么。令服务器不接受 EPSG:4326 感到惊讶。在 gis.stackexchange.com 上询问可能会得到更好的结果，因为您的代码似乎没问题。
谢谢！我也会在那里问。

标签： mapbox mapbox-gl-js coordinate-systems mercator

【解决方案1】：

使用以下坐标/投影似乎可行：

CRS=EPSG:3857&BBOX=614360.8293587392,5933210.01991552,1713821.866597408,7423590.537061271

这是另一个js fiddle。

【讨论】：