如何在OpenLayers中添加不同尺寸的第二層？

Question

我使用OpenLayers 3對高分辨率圖像進行深度縮放（沒有地理座標，只有像素）。

和XYZ是我需要作爲投影的格式，但我添加一個平鋪圖層時出現問題，因爲它應該有不同的投影。 也就是說我的主層具有像素大小（X）x（Y），但第二層具有大小（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]; 
    }); 

現在你可以繼續前進，配置你的兩個Zoomify層 - 先用proj1作爲投影和第二與proj2，他們應該很好地對齊。

請注意，以上未經測試。如果你可以提供一個工作片段或JSFiddle，我可以改進我的答案，如果有什麼不工作。