OpenLayersで異なるサイズの2番目のレイヤーを追加するには？

Question

私はOpenLayers 3を使って、高解像度の画像を深くズームしています（ジオ座標、ピクセルのみ）。

XYZは投影として必要なフォーマットですが、別の投影が必要なため、もう1つのタイルレイヤを追加する際に問題があります。 I.私のメインレイヤーはピクセルでサイズ（X）x（Y）を持ちますが、第2レイヤーはサイズ（X * k）x（Y * k）を持ちます。従って、これらの層は互いに対応していない。どちらの場合もタイルサイズは同じです。ここで

はコードです：

const imWidth = 100440; 
const imHeight = 221312; 

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

var heatMapProj = new ol.proj.Projection({ 
    code: 'HEATMAP', 
    units: 'pixels', 
    extent: [0, 0, imWidth, imWidth], 
    getPointResolution: function (resolution, point) { 
    return resolution; 
    } 
}); 
ol.proj.addProjection(heatMapProj); 

const koef = 21.5; 
ol.proj.addCoordinateTransforms('PIXELS', 'HEATMAP', 
    function (coordinate) { 
    return [coordinate[0] * koef, coordinate[1] * koef]; 
    }, 
    function (coordinate) { 
    return [coordinate[0]/koef, coordinate[1]/koef]; 
    }); 

this.map = new ol.Map({ 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.XYZ({ 
     crossOrigin: crossOrigin, 
     tileSize: [512, 512], 
     tileUrlFunction: (tileCoord, pixelRatio, projection) => { 
      const tileUrlTemplate = 'http://.../?lvl={z}&tx={x}&ty={y}'; 
      const z = 9 - tileCoord[0]; 
      const tileUrl = tileUrlTemplate 
      .replace("{z}", (z).toString()) 
      .replace("{x}", (tileCoord[1]).toString()) 
      .replace("{y}", (((-tileCoord[2]) - 1)).toString()); 
      return tileUrl; 
     }, 
     projection: 'PIXELS' 
     }) 
    }), 
    new ol.layer.Tile({ 
     source: new ol.source.XYZ({ 
     crossOrigin: crossOrigin, 
     tileSize: [512, 512], 
     tileUrlFunction: (tileCoord, pixelRatio, projection) => { 
      const heatMapUrlTemplate = 'http://...?lvl={z}&tx={x}&ty={y}'; 
      var z = 4 - tileCoord[0]; 
      const heatMapUrl = heatMapUrlTemplate 
      .replace('{z}', (z).toString()) 
      .replace('{x}', (tileCoord[1]).toString()) 
      .replace('{y}', (((-tileCoord[2]) - 1)).toString()); 
      return heatMapUrl; 
     }, 
     projection: 'HEATMAP' 
     }), 
     opacity: 0.5 
    }) 
    ], 
    controls: [], 
    target: this.mapSelector, 
    renderer: "canvas", 
    view: new ol.View({ 
    projection: 'PIXELS' 
    }) 
}); 

どのように私はこの問題を解決することができますか？たぶん投影法は正しい方法ではなく、別の方法で解決できます。

PS：私はgetPointResolution関数を使用しています。それ以外の場合は、コンソールにエラーメッセージが表示されます。「変換を定義する必要があります。そして、私は、OpenLayersが私の計画から内部的に "EPSG：4326"への変換を行っていることに気付きました。フラットな画像しか使用していないので、内部に球面座標があるとは思っていませんが、OpenLayersはそれが必要です。

Answer 1

ラスタ再投影（マップのレイヤーの異なる投影）は実験的な機能ではありません。しかし、あなたのために機能させるには、ol.proj.addCoordinateTransformsを使ってレイヤーの投影間に変換関数を登録する必要があります。あなたのコードを見てなければ、推測するのは難しいですが、このようなものは、トリックを行う必要があります。

var proj1 = new ol.proj.Projection({ 
    code: 'ZOOMIFY1', 
    units: 'pixels', 
    extent: [0, -Y, X, 0] 
}); 
var proj2 = new ol.proj.Projection({ 
    code: 'ZOOMIFY2', 
    units: 'pixels', 
    extent: [0, -Y * k, X * k, 0] 
}); 

ol.proj.addCoordinateTransforms(proj1, proj2, 
    function(coordinate) { 
     return [coordinate[0] * k, coordinate[1] * k]; 
    }, 
    function(coordinate) { 
     return [coordinate[1]/k, coordinate[2]/k]; 
    }); 

今、あなたは、先に行くあなたの2つのZoomify層を構成することができます - 投影としてproj1第1及びproj2を有する第二、彼らはうまく整列する必要があります。

上記はテストされていないことに注意してください。動作中のスニペットやJSFiddleを提供できる場合は、何かが動作していない場合、私の答えを絞り込むことができます。