文章/答案/技术大牛

发布

社区首页 >问答首页 >自动中心化图像

问自动中心化图像
EN

Stack Overflow用户

提问于 2015-03-28 00:18:17

回答 1查看 755关注 0票数 0

在编程方面，我是个新手，我希望你们能帮我。我正在尝试自动居中通过贵宾创建的Zoomify图像。

不幸的是，我很难找到如何对图像进行居中。如果我用开层的例子。org http://openlayers.org/en/v3.3.0/examples/zoomify.js i以一种奇怪的方式以中心为中心。

有什么地方是我做错了，或者是一种方式，我可以自动对图像和缩放，根据不同的图像大小？

下面是我正在使用的代码片段和有趣的中心，它可以使其半通过(但不健壮: center：-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

vips

html

openlayers-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-28 10:16:16

您的数据结构不符合Zoomify规范，该规范要求'/TileGroup{g}/{z}-{x}-{y}.jpg'格式的URL。您的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]
})

如果在图像边界上有不是256×256像素的瓷砖，那么这种方法将不能正常工作--剪裁的瓷砖将不会被显示。在这种情况下，您应该更改您的Zoomify_Image/目录结构，使其与Zoomify标准相匹配，并使用ol.source.Zoomify，它支持剪贴画块。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29312166

复制

相似问题

问自动中心化图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动中心化图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动中心化图像
EN