gis - Openlayers 3 为什么地理引用图像在最新的 OL3 版本中放置得不好？

Question

不久前，我正在为海洋学学生开发教育页面。一项应用在于探索卫星观测。该应用程序呈现西地中海盆地的 SST(海面温度) map 。在 openlayers v3.3.0 中渲染非常完美，而在新版本 v3.15.1 中渲染非常糟糕。代码很简单，一个基础层和一个带有source.ImageStatic的Image层:

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 位于 v.330
• v3.7.0 位于 v.370
• v3.14.0 位于 v.3140
• v3.15.1 位于 v.3151
• v3.16.0 位于 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]
  })
});

参见http://jsfiddle.net/wsyroL3d/用于 v3.16.0 的工作演示。