OpenLayers 3 fitExtent 未按預期工作

Question

我正在使用 OpenLayers 3 來顯示單個圖像。 我正在嘗試編寫一個可以縮放的函數，使圖像的左側接觸容器的左側，圖像的右側接觸容器的右側。 圖像的頂部和底部是否在視圖之外並不重要。

我已將投影范圍設置為與圖像分辨率相同：

var extent = [0, 0, 2480, 3508];
projection = new ol.proj.Projection({
    code: 'image',
    units: 'pixels',
    extent: extent
});

我正在使用以下代碼在控制台窗口中試驗fitExtent函數：

map.getView().fitExtent([0,0,2480,3508],map.getSize())

我得到的結果並不完全符合我的預期。 圖像居中，但看起來比我預期的要小得多。 我期待至少圖像的頂部和底部接觸容器的頂部和底部。

為什么會發生這種情況的解釋將非常棒。 適合圖像的解決方案使左側在左側，右側在右側（zoomToExtentY 函數）會更好。

小提琴示例...

Answer 1

感謝@bartvde 的評論，我能夠通過首先計算最長軸的分辨率使 fitExtent() 像我預期的那樣工作：

    var imgW = extent[2];
    var imgH = extent[3];
    var boxW = document.getElementById('map').offsetWidth;
    var boxH = document.getElementById('map').offsetHeight;

    var xRes = imgW / boxW;
    var yRes = imgH / boxH;
    var maxRes = xRes < yRes ? yRes : xRes;

然后設置默認地圖視圖的maxResolution：

view: new ol.View({
    projection: projection,
    center: ol.extent.getCenter(extent),
    zoom: 0,
    maxResolution:maxRes
})

我的另一個設置縮放級別的要求是通過將視圖的分辨率設置為 x 軸的分辨率來解決圖像的左側和右側接觸容器的左側和右側：

    //set the resolution to that of the xAxis.
    map.getView().setResolution(xRes);

有關上述兩種設置的示例，請參見此小提琴。