如何从方位角等距投影图像雷达,以在开放层地图上显示

时间:2018-12-21 23:47:31

标签: javascript image openlayers projection

我正在创建包含大气排放量和降雨的天气图。我可以访问大气排放的地方,并根据此数据生成带有墨卡托投影的图片,并将其显示在地图框地图上。 我遇到降雨问题,因为我已经在Azimuthal等距投影中有了图片,并且无法在地图框上显示它,因为地图框不支持除墨卡托投影仪之外的其他投影

所以我将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。如果我忘记写东西了,我很抱歉。

1 个答案:

答案 0 :(得分:0)

您交换了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);