2015-06-19 29 views
2

我使用OpenLayers 3顯示單個圖像。我正在嘗試編寫一個縮放功能,使圖像的左側接觸容器的左側,圖像的右側接觸容器的右側。圖像的頂部和底部是否在視圖之外並不重要。OpenLayers 3 fitExtent按預期工作

我已經設置了投影程度是相同的圖像分辨率:

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

其結果是:

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

I的混合物在控制檯窗口中fitExtent函數使用的代碼進行實驗我得到的不是我所期待的。圖像居中,但比我期望的要小得多。我期待至少圖像的頂部和底部接觸容器的頂部和底部。

解釋爲什麼會發生這種情況將是太棒了。一個適合圖像的解決方案使得左邊的左邊和右邊的右邊(zoomToExtentY函數)會更好。

Example fiddle...

+2

這與限制分辨率有關。在我的情況下,我通過確保您要實現的分辨率是視圖分辨率數組的一部分來解決這個問題。實際上,我將minResolution和maxResolution設置爲相同的值,因爲我只對單個分辨率感興趣(在該地圖上沒有交互):https://github.com/geoext/geoext3/blob/master/src/component/FeatureRenderer.js #L249:L255 – bartvde

+0

我確實對你的評論@bartvde加註了,但後來不小心解開了它。現在不會讓我重新投票。道歉。 – SausageFingers

+1

沒問題,很高興幫助你。 – bartvde

回答

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; 

然後設置默認地圖視圖的最大分辨率:

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