不同投影地图叠加失败求助（附OpenLayers实现代码）

看起来你遇到的核心问题是投影不匹配以及WMTS瓦片网格配置与服务端不一致，导致两个图层无法精准对齐。咱们一步步来修复：

问题根源分析 #

1. 投影冲突：你的WMTS图层使用瑞士本地投影EPSG:2056，但OpenLayers的View默认采用EPSG:3857（Web墨卡托），这会导致WMTS图层被动态转换投影，容易出现精度偏差。
2. 错误的图层范围设置：你给OSM的XYZ源设置了EPSG:2056的extent，但OSM本身基于EPSG:3857，这个extent设置完全不匹配，会导致OSM图层的范围和瓦片加载逻辑出错。
3. 自定义WMTS瓦片网格不匹配：手动构建的tilegrid分辨率与服务端实际的瓦片矩阵不一致，这是瓦片错位的关键——每个缩放级别的分辨率必须和WMTS服务定义的完全一致，否则瓦片的行列号对应关系会混乱。

修复方案 #

1. 统一视图投影 #

首先，把View的投影明确设置为EPSG:2056，让所有图层都在同一投影下渲染，避免动态转换的精度损失：

view: new ol.View({
  projection: 'EPSG:2056', // 明确指定目标投影
  center: [773332, 5941674], // 该坐标已是EPSG:2056，无需修改
  zoom: 8,
})

2. 修正OSM图层配置 #

去掉OSM源的extent设置，让OpenLayers自动处理从EPSG:3857到EPSG:2056的投影转换：

new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    // 移除错误的extent配置
  })
})

3. 自动匹配WMTS服务的瓦片网格 #

不要手动构建tilegrid，而是通过WMTS服务的GetCapabilities文档自动解析正确的瓦片配置，确保和服务端的瓦片矩阵完全一致：

// 请求WMTS服务的配置文档并解析
fetch('https://sitn.ne.ch/mapproxy95/service?REQUEST=GetCapabilities&SERVICE=WMTS')
  .then(response => response.text())
  .then(text => {
    const parser = new ol.format.WMTSCapabilities();
    const capabilities = parser.read(text);
    // 从配置中提取目标图层的参数
    const wmtsOptions = ol.source.WMTS.optionsFromCapabilities(capabilities, {
      layer: 'plan_cadastral_20180628',
      matrixSet: 'EPSG2056',
      format: 'image/png',
      style: 'default'
    });

    // 将配置好的WMTS图层添加到地图
    map.addLayer(new ol.layer.Tile({
      opacity: 0.7,
      source: new ol.source.WMTS({
        ...wmtsOptions,
        crossOrigin: "anonymous"
      })
    }));
  });

完整修正后的代码 #

// 先初始化地图，只加载OSM图层
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      })
    })
  ],
  view: new ol.View({
    projection: 'EPSG:2056',
    center: [773332, 5941674],
    zoom: 8,
  })
});

// 动态加载并配置WMTS图层
fetch('https://sitn.ne.ch/mapproxy95/service?REQUEST=GetCapabilities&SERVICE=WMTS')
  .then(response => response.text())
  .then(text => {
    const parser = new ol.format.WMTSCapabilities();
    const capabilities = parser.read(text);
    const wmtsOptions = ol.source.WMTS.optionsFromCapabilities(capabilities, {
      layer: 'plan_cadastral_20180628',
      matrixSet: 'EPSG2056',
      format: 'image/png',
      style: 'default'
    });

    map.addLayer(new ol.layer.Tile({
      opacity: 0.7,
      source: new ol.source.WMTS({
        ...wmtsOptions,
        crossOrigin: "anonymous"
      })
    }));
  });

修复逻辑说明 #

• 统一视图投影后，所有图层都在EPSG:2056下渲染，消除了跨投影动态转换的精度损耗。
• 移除OSM的错误extent配置，让OpenLayers正确处理其原生投影到目标投影的转换逻辑。
• 通过GetCapabilities自动解析WMTS配置，确保瓦片网格的分辨率、矩阵ID、原点等参数与服务端完全一致，瓦片就能精准对齐了。

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