Openlayers - ol.source.Zoomify 基于层不显示在另一层之上

Question

我有 2 张不同尺寸的图像（但图块尺寸相同）。图像彼此对应，我想以将第二张图像放大以对应第一张图像的方式将它们一个一个地显示在另一个图像上。我将 ol.source.Zoomify 来源用于它们和带有转换的投影。但是我什至无法显示第二张图片

查看示例 http://jsfiddle.net/sk5cLj4n/37/。

const imWidth = 31871;       
const imHeight = 17770;

const imWidthSmall = 19122.6;   
const imHeightSmall = 10662;  

// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
  code: 'PIXELS',
  units: 'pixels',
  extent: [0,0, imWidth, imHeight],
  getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(primaryImageProjection);

// Overlay image projection
const overlayProjection = new ol.proj.Projection({
  code: 'OVERLAY',
  units: 'pixels',
  extent: [0,0, imWidth, imHeight],
  getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(overlayProjection);

 // Transformations of projections
 function TransformOverlayToPixel(coordinate) {
   console.log('TransformOverlayToPixel');
   return [
     (coordinate[0]),
     (coordinate[1])
   ];
 }
 function TransformPixelToOverlay(coordinate) {
   console.log('TransformPixelToOverlay');
   return [
    (coordinate[0]),
    (coordinate[1])
   ];
 }
 ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
      TransformPixelToOverlay,
      TransformOverlayToPixel);


var map = new ol.Map({
  layers: [
    new ol.layer.Tile({        
        opacity: 0.8,
      source: new ol.source.Zoomify({
        size: [imWidth, imHeight], // temp
        url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
        projection: 'PIXELS'
      })
    }),
    new ol.layer.Tile({        
            opacity: 0.8,
            source: new ol.source.Zoomify({
        size: [imWidth, imHeight], // temp
        url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
        projection: 'OVERLAY'
      })
    })
  ],    
  target: 'map',
  renderer: "canvas",
  view: new ol.View({
    projection: 'PIXELS',
    center: [imWidth / 2, imHeight / 2],
    zoom: 0
  })
});

fiddle 的简短说明：

带有蓝色边框的图块用于主层
带有黑色边框的图块用于第二层（覆盖）
只有 3 个缩放级别可用于缩放
目前投影转换什么都不做。这只是为了简化。应该有一个倍增来拉伸第二张图片。

Answer 1

这是解决方法 http://jsfiddle.net/sk5cLj4n/41/

const imWidth = 31871;       
const imHeight = 17770;

const imWidthSmall = 19122.6;   
const imHeightSmall = 10662;  

const koef = imWidth / imWidthSmall;

// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
    code: 'PIXELS',
    units: 'pixels',
    extent: [0, -imHeight, imWidth, 0],
    getPointResolution: function (resolution, point) { return resolution; }
    });
    ol.proj.addProjection(primaryImageProjection);

    // Overlay image projection
    const overlayProjection = new ol.proj.Projection({
    code: 'OVERLAY',
    units: 'pixels',
    extent: [0,-imHeight, imWidth, 0],
    getPointResolution: function (resolution, point) { return resolution; }
    });
    ol.proj.addProjection(overlayProjection);

    // Transformations of projections
function TransformOverlayToPixel(coordinate) {
    console.log('TransformOverlayToPixel');
    return [
    (coordinate[0]) * koef,
    (coordinate[1]) * koef
    ];
}
function TransformPixelToOverlay(coordinate) {
    console.log('TransformPixelToOverlay');
    return [
            (coordinate[0]) / koef,
        (coordinate[1]) / koef
    ];
}
        ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
        TransformPixelToOverlay,
        TransformOverlayToPixel);


    var map = new ol.Map({
    layers: [
        new ol.layer.Tile({        
            opacity: 0.8,
        source: new ol.source.Zoomify({
            size: [imWidth, imHeight], // temp
            url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
            projection: 'PIXELS'
        })
        }),
        new ol.layer.Tile({        
                opacity: 0.8,
                source: new ol.source.Zoomify({
            size: [imWidth, imHeight], // temp
            url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
            projection: 'OVERLAY'
        })
        })
    ],    
    target: 'map',
    renderer: "canvas",
    view: new ol.View({
        projection: 'PIXELS',
        center: [imWidth / 2, imHeight / 2],
        zoom: 0
    })
    });

查看范围是如何指定的。还要适当设置系数，使图像相互匹配。

Openlayers - ol.source.Zoomify 基于层不显示在另一层之上

Openlayers - ol.source.Zoomify based layer is not displayed on top of another layer

openlayers-3