OpenLayers 6中如何获取zonemap叠加层所需的bounds边界参数

结论说明 #

• 使用XYZ源替代TMS是正确选择，OpenLayers 6已废弃原TMS层实现，XYZ可完全覆盖原TMS的所有功能场景
• 可通过OpenLayers内置的TileGrid接口直接将tileCoord转换为对应瓦片的bounds，无需手动计算坐标

实现代码 #

// 模块化开发导入依赖，若使用CDN引入直接用ol.xxx前缀调用对应方法即可
import { transformExtent } from 'ol/proj';
import XYZ from 'ol/source/XYZ';
import { createXYZ } from 'ol/tilegrid';

// 替换为你实际使用的投影编码
const DK_PROJ = 'EPSG:你的自定义DK投影编码';
const WGS_MERCATOR = 'EPSG:3857';

const tileUrlFunction = function(tileCoord, pixelRatio, projection) {
  // 获取当前瓦片的原始边界
  const tileExtent = this.getTileGrid().getTileCoordExtent(tileCoord);
  // 投影转换，和旧版逻辑保持一致，不需要转换可跳过这一步
  const transformedExtent = transformExtent(tileExtent, projection, DK_PROJ);
  const [left, bottom, right, top] = transformedExtent;
  // 拼接请求地址，根据你实际接口规则调整参数格式
  return `http://example.com?extends=${left},${bottom},${right},${top}`;
}

const myZonemapSource = new XYZ({
  projection: WGS_MERCATOR,
  tileUrlFunction: tileUrlFunction,
  // 若原TMS服务是y轴翻转的（绝大多数TMS都符合这个规则），添加reverseY配置保证瓦片坐标和旧版完全一致
  tileGrid: createXYZ({
    maxZoom: 18, // 替换为你服务的实际最大层级
    reverseY: true
  })
});

注意事项 #

• 若你已在OpenLayers中注册了自定义投影，转换后的extent和旧版TMS返回的bounds完全一致
• URL拼接时注意参数分隔符，单参数用?开头，多参数用&分隔，根据你的实际接口规则调整即可
• 若瓦片分辨率、原点和默认规则不一致，在createXYZ中对应配置resolutions、origin参数即可，和旧版TMS的配置保持一致

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