Openlayers - ol.source.Zoomifyベースのレイヤーが別のレイヤーの上に表示されない

Question

サイズが異なる2つの画像があります（タイルサイズは同じです）。画像はお互いに対応しており、第1の画像に対応するように第2の画像が拡大されるように、それらを互いに表示したい。 私はol.source.Zoomifyの両方のソースと変換を伴う投影を使用します。しかし、私は2番目の画像を表示することさえできません。

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. 現在の投影変換は何もしません。それは単純化のためです。 2番目の画像を伸ばすには、倍増が必要です。

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

を解決していますか。また、係数を合わせてお互いの画像を一致させる必要があります。