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
  })
});

小提琴的简短解释：

1. 带有蓝色边框的图块用于主图层
2. 黑色边框的图块用于辅助图层（叠加）
3. 只有3个缩放级别可用于缩放
4. 目前投影转型什么都不做。这只是为了简化。应该有一个mupliplication来拉伸第二张图像。

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
    })
    });

查看范围的指定方式。并且还应该正确设置系数以使图像彼此匹配。