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

Question

I am in the process of creating a weather map with atmospheric discharges and rainfall. I have access to places of atmospheric discharges and on the basis of this data generates a picture with mercator projection and display it on the mapbox map. I have a problem with rainfall because I already have a picture in Azimuthal Equidistant projection and I can not display it on the mapbox, because mapbox does not support other projections than mercator

So I changed the mapbox to openlayers and I have a code problem because nothing is displayed. I do not know if I am doing well and asking for help. Even before switching to openlayers I wanted to convert this image to mercator projection in some way, but I failed because there is not much information on the internet and the picture was not in the right position.

My code:

Image projection data:

<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>

My javascript code in the website:

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);

Please help. I'd like to force the mapbox to work, but using openlayers will also be ok. I'm sorry if I forgot something writing yet.

Answer 1

You had a combination of Lon and Lat values swapped and wrong projections for the transforms and the layer. Using a random png for a static image I got this setup to output the image in the expected position.

    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);