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。否则我在控制台中看到错误消息：＆＃34;应该定义转换＆＃34;。在重新调整之后，我发现OpenLayers在内部进行了一些转换，从我的预测到＆＃34; EPSG：4326＆＃34;然后回来。我不希望内部有任何球面坐标，因为我只使用平面图像，但看起来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，如果某些东西不起作用，我可以改进我的答案。

如何在OpenLayers中添加不同大小的第二层？

1 个答案: