我正在创建包含大气排放量和降雨的天气图。我可以访问大气排放的地方,并根据此数据生成带有墨卡托投影的图片,并将其显示在地图框地图上。 我遇到降雨问题,因为我已经在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。如果我忘记写东西了,我很抱歉。
答案 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);