自动将 Zoomify 图像居中

Question

我是编程方面的新手，希望大家能帮助我。我正在尝试自动将通过 VIPS 创建的 Zoomify 图像居中。

不幸的是，我很难找到如何使图像居中的方法。如果我使用 openlayers 中的示例。组织 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
    })
  });

Answer 1

您的数据结构不符合 Zoomify 规范，该规范要求 URL 格式为 '/TileGroup{g}/{z}-{x}-{y}.jpg'。您的 URL 格式 'Zoomify_Image/1/{z}/{y}/{x}.jpg' 与此有很大不同，我想这就是您使用 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
})

最后，您的视图定义将如下所示：

new ol.View({
  projection: proj,
  center: imgCenter,
  zoom: 0,
  extent: [0, -imgHeight, imgWidth, 0]
})

如果图像边界处的图块不是 256x256 像素，则此方法将无法正常工作 - 将不会显示剪裁的图块。在这种情况下，您应该更改 Zoomify_Image/ 目录结构以匹配 Zoomify 标准并使用支持裁剪图块的 ol.source.Zoomify。

自动将 Zoomify 图像居中

Automagically center a Zoomify image

html

zoomify

openlayers-3

vips