[英]Automagically center a Zoomify image
我是編程方面的新手,我希望大家都能幫助我。 我正在嘗試自動居中通過VIPS創建的Zoomify圖像。
不幸的是,我很難找到如何使圖像居中的方法。 如果我使用openlayers中的示例。 org http://openlayers.org/en/v3.3.0/examples/zoomify.js我最終以一種怪異的方式居中。
我做錯了什么嗎?或者我可以根據不同的圖像大小自動居中並縮放圖像?
這是我正在使用的代碼的一個片段,其中有一個有趣的中心,使其可以一半通過(但不可靠:中心:[-20000000,20000000])
var imgWidth = 41056;
var imgHeight = 16168;
var imgCenter = [imgWidth / 2, imgHeight / 2];
// Maps always need a projection, but layers are not geo-referenced, and
// are only measured in pixels. So, we create a fake projection that the map
// can use to properly display the layer.
var proj = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, imgWidth, imgHeight]
});
var source = new ol.source.XYZ({
url: 'Zoomify_Image/1/{z}/{y}/{x}.jpg'
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: source,
wrapX: false,
projection: proj
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({tileGrid: new ol.tilegrid.XYZ({})}),
wrapX: false,
projection: proj
})
],
//renderer: exampleNS.getRendererFromQueryString(),
view: new ol.View({
projection: proj,
center: [-20000000,20000000],
zoom: 0
})
});
您的數據結構不符合Zoomify規范,該規范要求URL格式為'/TileGroup{g}/{z}-{x}-{y}.jpg'
。 您的URL格式'Zoomify_Image/1/{z}/{y}/{x}.jpg'
ol.source.XYZ
,我想這就是您使用ol.source.XYZ
而不是ol.source.Zoomify
要修復您的代碼,您將必須使用ol.source.TileImage
而不是ol.source.XYZ
,因為ol.source.XYZ
當前僅支持EPSG:3857投影。 假設您具有7個縮放級別,並且目錄結構遵循Zoomify標准,但是在圖像的邊界處未使用裁剪的圖塊,則源定義可能如下所示:
var source = new ol.source.TileImage({
projection: proj,
tileUrlFunction: function(tileCoord, pixelRatio, projection) {
return url + 'Zoomify_Image/1/' + tileCoord[0] + '-' + tileCoord[1] +
'-' + (-tileCoord[2] - 1) + '.jpg';
},
tileGrid: new ol.tilegrid.Zoomify({
resolutions: [1, 2, 4, 8, 16, 32, 64].reverse()
})
});
您的Tile圖層定義如下所示:
new ol.layer.Tile({
extent: [0, -imgHeight, imgWidth, 0],
source: source
})
最后,您的View定義將如下所示:
new ol.View({
projection: proj,
center: imgCenter,
zoom: 0,
extent: [0, -imgHeight, imgWidth, 0]
})
如果圖像邊界處的圖塊不是256x256像素,則此方法將無法正常工作-裁剪的圖塊將不會顯示。 在這種情況下,您應該更改Zoomify_Image/
目錄結構以匹配Zoomify標准,並使用ol.source.Zoomify
(它支持剪切的圖塊)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.