Question

前段时间我正在为海洋学学生开发教育页面。一个应用包括探索卫星观测。该应用程序呈现西地中海盆地的SST（海面温度）地图。在openlayers v3.3.0中，渲染是完美的，而在新版本v3.15.1中，渲染非常糟糕。代码非常简单，基础层和带有source.ImageStatic的图像层：

function init() {  
  var base = new ol.layer.Tile({
      source: new ol.source.MapQuest({ layer: 'sat' })
  });

  var map = new ol.Map({
      layers: [base],
      target: 'map',
      view: new ol.View({
      center: ol.proj.transform([10.0, 41.0], 'EPSG:4326', 'EPSG:3857'),
      zoom: 4
    })
  });

  var imageLayer = new ol.layer.Image({
      opacity: 0.75,
      source: new ol.source.ImageStatic({
       url: '/temporal/20130504.1337.n19.png',
       imageExtent: ol.extent.applyTransform([-15.006540,35.004948,16.493460, 46.504948],ol.proj.getTransform("EPSG:4326","EPSG:3857")),
        imageSize: [2048,1166],
        projection: map.getView().getProjection()
       })
  });

  map.addLayer(imageLayer);     
}

问题出现至少在v3.7.0发布之后出现。我为不同版本准备了一个示例：

v3.3.0 at v.330
v3.7.0 at v.370
v3.14.0 at v.3140
v3.15.1 at v.3151
v3.16.0 at v.3160

所有代码都具有相同的代码，仅在ol.js版本中有所不同。

有人能告诉我这是新版本的错误还是我遗漏了一些明显的东西？

Answer 1

您的imageSize值中有拼写错误。图像的宽度为2408像素，而不是2048.旧版OpenLayers中存在一个错误，因此忽略了imageSize。最新版本正确选择它，因此您的拼写错误导致错位。正确的图层定义是

var imageLayer = new ol.layer.Image({
  opacity: 0.75,
  source: new ol.source.ImageStatic({
    url: '/temporal/20130504.1337.n19.png',
    imageExtent: ol.proj.transformExtent([-15.006540, 35.004948, 16.493460, 46.504948], 'EPSG:4326', 'EPSG:3857'),
    imageSize: [2408, 1166]
  })
});

有关v3.16.0的工作演示，请参阅http://jsfiddle.net/wsyroL3d/。

Openlayers 3为什么地理参考图像在最近的OL3版本中被错误地放置？

1 个答案: