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

查看如何指定范围。还应该适当设置系数以使图像相互匹配。