Автоматически центрировать изображение Zoomify

Я новичок в программировании, и я надеялся, что вы сможете мне помочь. Я пытаюсь автоматически центрировать изображение Zoomify, созданное через VIPS.

К сожалению, мне трудно понять, как центрировать изображение. Если я использую пример из 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
    })
  });

html openlayers-3 vips zoomify
person IamNotaSmartMan    schedule 28.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваша структура данных не соответствует спецификации 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, который поддерживает обрезанные фрагменты.

person ahocevar    schedule 28.03.2015
comment
Я только что обновил свой оригинальный ответ. Существует причина, по которой ol.source.Zoomify не поддерживает шаблоны URL: спецификация Zoomify определяет фиксированный формат URL, который реализован в OpenLayers 3. - person ahocevar; 28.03.2015
comment
Работает отлично! Большое спасибо! Мы процитируем вас в нашем коде! Спасибо еще раз! - person IamNotaSmartMan; 28.03.2015