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函数）会更好。

Example fiddle...

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);

请参阅this fiddle，了解上述两种设置的实例。

OpenLayers 3 fitExtent没有按预期工作

1 个答案: