OpenLayers VectorTileSource使用tileUrlFunction时y值差异问题求解

问题根源 #

你遇到的y值异常本质是XYZ网格与TMS规范的y轴原点差异：

• OpenLayers的createXYZ生成的网格默认是XYZ规范，y轴原点在左上角，tileCoord[2]返回的是左上角为原点的y坐标
• TMS规范要求y轴原点在左下角，之前用{-y}占位符时OpenLayers内部自动完成了y坐标翻转，自定义tileUrlFunction时需要手动实现这个翻转逻辑

解决方案 #

方案1：手动计算翻转y值（最简洁）

直接在tileUrlFunction中按TMS规范对y坐标做翻转即可，原有tileGrid配置不需要修改：

const tileUrlFunction = (tileCoord) => {
  const z = tileCoord[0];
  const x = tileCoord[1];
  // 计算TMS规范的翻转y值：当前层级总瓦片数 - 1 - 原生y坐标
  const y = Math.pow(2, z) - 1 - tileCoord[2];
  if (z > 18) {
    return `${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:layer1@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`;
  } else {
    return `${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:layer2@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`;
  }   
};

方案2：调用tileGrid内置方法适配（通用性更强）

如果后续可能修改tileGrid的层级、原点等参数，可调用OpenLayers内置方法自动完成坐标适配，避免手动调整翻转逻辑：

// 先定义tileGrid实例
const customTileGrid = createXYZ({ maxZoom: 19 });
const source = new VectorTileSource({
  tileUrlFunction: (tileCoord) => {
    // 调用内置方法直接获取符合TMS规范的坐标数组
    const tmsTileCoord = customTileGrid.getTileCoordForTileUrlFunction(tileCoord);
    const z = tmsTileCoord[0];
    const x = tmsTileCoord[1];
    const y = tmsTileCoord[2];
    if (z > 18) {
      return `${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:layer1@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`;
    } else {
      return `${geoserverUrl}/gwc/service/tms/1.0.0/myworkspace:layer2@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`;
    }
  },
  format: new MVT(),
  wrapX: true,
  tileGrid: customTileGrid
});

内容的提问来源于stack exchange，提问作者Falcoa