Openlayers XYZ 不支持同一地图实例使用不同的tileSizes，512 和256

Question

1. 使用 OpenLayers

   ^7.4.0

2. 尝试从 2 个不同的提供商获取图块，其中一个提供 256 个tileSize 图像，另一个提供 512 个
3. 缩放级别 18 或用户事件后，我更换我的提供商
4. 使用new XYZ创建每个tileLayer的源

参考代码： 1️⃣来自第一个来源的平铺第 1 层，具有 512 个图块大小

const extent = [12445171.1973, -5518141.946, 17346924.9472, -939258.2036];
    const startResolution = getWidth(extent) / 512;
    const resolutions = new Array(20 + 1);
    resolutions[0] = startResolution;
    for (let i = 1, ii = 20; i <= ii; ++i) {
      resolutions[i] = resolutions[i - 1] / 2;
    }

    const mabBox512Source = new XYZ({
      tilePixelRatio: hiDPI ? 2 : 1,
      tileSize: [512, 512],
      tileGrid: new TileGrid({
        extent: extent,
        resolutions: resolutions,
        tileSize: [512, 512],
      }),
      maxZoom: 20,
      tileUrlFunction: function (tileCoord) {
        const z = tileCoord[0];
        const x = tileCoord[1];
        const y = tileCoord[2];

        const mapBoxURl = `https://api.mapbox.com/style...............`;

        return mapBoxURl;
      },
    });
    
    const tileLayer1 = new OLTileLayer({
      source: mabBox512Source,
      properties: {
        name: 'BASE_TILE_LAYER_1',
      },
    });

2️⃣从其他来源平铺第 2 层，具有 256 个图块大小

    const startResolution2 = getWidth(extent) / 256;
    const resolutions2 = new Array(20 + 1);
    resolutions2[0] = startResolution2;
    for (let i = 1, ii = 20; i <= ii; ++i) {
      resolutions2[i] = resolutions2[i - 1] / 2;
    }

    const newMap256Source = new XYZ({
      tilePixelRatio: hiDPI ? 2 : 1,
      tileSize: [256, 256],
      tileGrid: new TileGrid({
        extent: extent,
        resolutions: resolutions2,
        tileSize: [256, 256],
      }),
      maxZoom: 20,
      tileUrlFunction: function (tileCoord) {
        const z = tileCoord[0];
        const x = tileCoord[1];
        const y = tileCoord[2];

        const nearMapUrl = `https://api.nearmap.com/tiles/.....`;

        return nearMapUrl;
      },
    })
    const tileLayer2 = new OLTileLayer({
      source: newMap256Source,
      properties: {
        name: 'BASE_TILE_LAYER_1',
      },
      visible: false,
    });

在回调函数中的某些条件/用户操作下，我正在执行以下操作

      console.log("-----------Switch Layer---------");
      tileLayer1.setVisible(false);
      tileLayer3.setVisible(true);

⛔⛔出了什么问题⛔⛔

我怀疑这不是正确的方法，因为地图停止支持某些配置规则。就像它不尊重我应用的 maxZoom 一样。这是明显的破损。可能还有其他我不知道的破损。

🚀 另外，我尝试了一种不同的方法，我保留了一个tileLayer，但我使用setSource切换了用户操作/条件（缩放> 18）上的源。

Answer 1

在@Mike🫡的帮助下， 在openlayers中的同一个地图实例中同时使用两个不同的tileSizes的解决方案是，

• 您通过 XYZ 创建tileSource
• 在tileUrlFunction的帮助下提供不同的url
• 还计算分辨率以提供给 XYZ 的tileGrid选项。

阅读下面的代码片段。

const extent = MapService.mapInstance.getView().getProjection().getExtent();
const tileSizes = new Array(20 + 1);
const resolutions = new Array(tileSizes.length);
tileSizes[0] = 512;
resolutions[0] = getWidth(extent) / tileSizes[0];

for (let i = 1, ii = resolutions.length; i < ii; ++i) {
  resolutions[i] = resolutions[i - 1] / 2;
  tileSizes[i] = i < 18 ? 512 : 256;
}

const tileSource1 = new XYZ({
  tilePixelRatio: hiDPI ? 2 : 1,
  tileGrid: new TileGrid({
    extent: extent,
    resolutions: resolutions,
    tileSizes: tileSizes,
  }),
  zDirection: -1,
  tileUrlFunction: function (tileCoord) {
    let z = tileCoord[0];
    const x = tileCoord[1];
    const y = tileCoord[2];
    const tileSize = tileSizes[z];

    z =
      tileSize > tileSizes[0]
        ? z - 1
        : tileSize < tileSizes[0]
          ? z + 1
          : z;

    const map256URL = `https://map_256images_provider/${z}/${x}/${y}.img?until=1Y&tertiary=satellite&apikey=SOMETHING`;

    const map512URL = `https://map_512images_provider/tiles/512/${z}/${x}/${y}${hiDPI ? '@2x' : ''}?access_token=SOMETHING`;

    const url = tileSize === 512 ? map512URL : map256URL;

    return url;
  },
});

const tileLayer1 = new OLTileLayer({
  source: tileSource1,
  properties: {
    name: 'BASE_TILE_LAYER_1',
  },
});

map.addLayer(tileLayer1);