在 VectorTileSource OpenLayers 中使用 url 与 tileUrlFunction 时 y 值的差异

Question

我在 OpenLayers 中使用 GeoServer MVT 图层并将它们添加到我刚做的地图中：

const source = new VectorTileSource({
      url:`${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:mylayer@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf`,
      format: new MVT(),
      wrapX: true,
      tileGrid: createXYZ({ maxZoom: 19 })
    });

const layer = new VectorTileLayer({
    className: "myLayer",
    source: source,
    minResolution: 0,
    maxResolution: 2,
    style: myStyle(),
    visible: true
  });

到目前为止一切顺利。现在我想使用 tileUrlFunction 而不是定义 url 属性，因为我想根据缩放级别在 url 中定义一个不同的层，为此我使用了以下函数在 new VectorTileSource 实例化的属性 tileUrlFunction 中调用：

    const tileUrlFunction = (tileCoord) => {
        if (tileCoord[0] > 18) {
          return `${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:layer1@EPSG%3A900913@pbf/${tileCoord[0]}/${tileCoord[1]}/${tileCoord[2]}.pbf`;
        } else {
return `${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:layer2@EPSG%3A900913@pbf/${tileCoord[0]}/${tileCoord[1]}/${tileCoord[2]}.pbf`;
         }   
      };
    };

问题是在渲染时使用 tileUrlFunction 时，我得到了一个错误的 y 值（对应于 tileCoord[2]）。使用 ${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:mylayer@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf 时，我得到例如坐标 /18/258309/98012.pbf 并且图块在地图上正确呈现，当我使用 tileUrlFunction 时，我得到错误的 y 18/2258309/164130.pbf，图块渲染失败。

我注意到 如果我不 在定义 url 时将破折号放在 y 中 "...@EPSG%3A900913@pbf/{z }/{x}/{-y}.pbf", 我也得到同样的错误值。

阅读文档我可以看到

Grids like TMS where x 0 and y 0 are in the bottom left can be used by using the {-y} placeholder in the URL template, so long as the source does not have a custom tile grid

我很确定这个问题与 tileGrid 的定义有关，但我不知道如何使函数 tileUrlFunction 起作用。

Answer 1

OpenLayers 将传递 XYZ 源的图块坐标。要转换为 TMS，请使用

const z = tileCoord[0];
const x = tileCoord[1];
const y = Math.pow(2, z) - tileCoord[2] - 1;

在 VectorTileSource OpenLayers 中使用 url 与 tileUrlFunction 时 y 值的差异

Difference in y value when using url vs tileUrlFunction in VectorTileSource OpenLayers

openlayers-6

vector-tiles