如何从等距方位角重新投影图像雷达，以显示在 openlayers 地图上

Question

我正在制作一张包含大气排放量和降雨量的天气图。我可以访问大气排放的地方，并根据这些数据生成带有墨卡托投影的图片并将其显示在 mapbox 地图上。 我遇到了降雨问题，因为我已经在 Azimuthal Equidistant 投影中有一张图片，我无法在 mapbox 上显示它，因为 mapbox 不支持墨卡托以外的其他投影

所以我将 mapbox 更改为 openlayers，但我遇到了代码问题，因为没有显示任何内容。 我不知道我是否做得很好并寻求帮助。 甚至在切换到 openlayers 之前，我就想以某种方式将此图像转换为墨卡托投影，但我失败了，因为互联网上没有太多信息，而且图片位置也不对。

我的代码：

图像投影数据：

<projection lat_lr="48.000000" lat_ul="56.300000" type="aeqd" lon_lr="25.300000" size_x="800" size_y="800" lon_ul="11.600000">
    <lon_0>19.092600</lon_0>
    <lat_0>52.346900</lat_0>
    <ellps>+ellps=sphere</ellps>
</projection>

我在网站上的 javascript 代码：

var centerLat = 52.346900;
var centerLon = 19.092600;
var source = "http://localhost/ol/2018120900400000dBR.sri_echoOnly.png";
var lat1 = 11.6;
var lon1 = 48.0;
var lat2 = 25.3;
var lon2 = 56.3;

proj4.defs("ESRI:54032","+proj=aeqd +lat_0=52.346900 +lon_0=19.092600 +x_0=800 +y_0=800 +ellps=sphere +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);

var transformFrom = "ESRI:54032";
var transformTo = "EPSG:3857";

var center = ol.proj.transform([centerLat, centerLon], transformFrom, transformTo);


mapVar = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
    view: new ol.View({
        center: ol.proj.fromLonLat([centerLon, centerLat]),
        zoom: 4
    })
});

var leftUp = ol.proj.transform([lat1, lon1], transformFrom, transformTo);
var downRight = ol.proj.transform([lat2, lon2], transformFrom, transformTo);

var extent =[leftUp[0],leftUp[1],downRight[0],downRight[1]];

var layer =new ol.layer.Image({
    source: new ol.source.ImageStatic({
        attributions: '',
        url: source,
        projection: transformTo,
        imageExtent: extent,
        imageSize: [800, 800]
    })
});
mapVar.addLayer(layer);

请帮忙。我想强制 mapbox 工作，但使用 openlayers 也可以。如果我忘了写点什么，我很抱歉。

Answer 1

您有 Lon 和 Lat 值交换的组合以及变换和图层的错误投影。对静态图像使用随机 png 我得到此设置以在预期位置输出图像。

    var lon1 = 11.6;
    var lat1 = 48.0;
    var lon2 = 25.3;
    var lat2 = 56.3;

    proj4.defs("ESRI:54032","+proj=aeqd +lat_0=52.346900 +lon_0=19.092600 +x_0=800 +y_0=800 +ellps=sphere +datum=WGS84 +units=m +no_defs");
    ol.proj.proj4.register(proj4);

    mapVar = new ol.Map({
        target: 'map',
        layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
        view: new ol.View({
            center: ol.proj.fromLonLat([centerLon, centerLat]),
            zoom: 4
        })
    });

    var leftUp = ol.proj.fromLonLat([lon1, lat2], "ESRI:54032");
    var downRight = ol.proj.fromLonLat([lon2, lat1], "ESRI:54032");

    var extent = [leftUp[0], downRight[1], downRight[0], leftUp[1]]; 

    var layer =new ol.layer.Image({
        source: new ol.source.ImageStatic({
            attributions: '',
            url: source,
            projection: "ESRI:54032",
            imageExtent: extent
        })
    });
    mapVar.addLayer(layer);