Mapbox GL JS ImageSource 坐标错误

Mapbox GL JS ImageSource wrong coordinates

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

这些是相关的 WMS 功能:https://maps.dwd.de/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities

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

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

问题是图像没有 100% 正确对齐,但稍微 shifted/stretched。我阅读了一些有关使用墨卡托投影的 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

这是雷达盲点(粉红色)必须位于的位置:

使用以下 coordinates/projection 似乎可行:

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

这是另一个 js fiddle