Leaflet无插件调用WMTS服务：地图定位偏移但切片显示正常

这问题我碰到过不少次，核心原因就是坐标系不匹配！

你当前的代码里，Leaflet默认使用的是Web墨卡托投影（EPSG:3857），但你调用的WMTS服务用的是EPSG:25832（UTM 32N）。你设置的WGS84经纬度[50.884639, 6.095102]被Leaflet当成了EPSG:3857坐标系的坐标来解析，自然定位到了错误的位置。而手动滚动后切片能正常显示，是因为此时Leaflet计算出的x/y/z参数刚好和WMTS服务基于EPSG:25832的切片规则匹配，所以能正确加载切片。

解决方案：让Leaflet支持EPSG:25832投影 #

Leaflet原生仅支持EPSG:3857和EPSG:4326（WGS84），要适配其他投影最便捷的方式是使用Proj4Leaflet插件（虽然你说尝试不用插件，但这是最可靠的方案，手动处理坐标转换不仅繁琐还容易出错）：

1. 首先引入proj4.js和proj4leaflet.js（可从本地资源引入）
2. 定义EPSG:25832的投影参数，创建对应的CRS对象
3. 初始化地图时指定这个CRS，就能自动处理坐标转换了

修改后的代码示例：

// 定义EPSG:25832投影参数
proj4.defs('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

// 创建Leaflet兼容的CRS对象，分辨率从WMTS元数据中提取
const crs25832 = new L.Proj.CRS('EPSG:25832', proj4.defs('EPSG:25832'), {
  resolutions: [8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5],
  origin: [0, 0]
});

// 初始化地图时指定自定义CRS
const map = L.map('mymap', {
  crs: crs25832
}).setView([50.884639, 6.095102], 5); // 这里直接用WGS84经纬度即可，插件会自动转换为EPSG:25832坐标

// 添加WMTS图层，保持原URL不变
L.tileLayer('https://www.wmts.nrw.de/geobasis/wmts_nw_dop20/tiles/nw_dop20/EPSG_25832_16/{z}/{x}/{y}.jpeg').addTo(map);

关于“不使用插件”的说明 #

如果坚持不使用插件，你需要手动把WGS84经纬度转换为EPSG:25832的平面坐标，同时手动映射Leaflet的缩放级别和WMTS服务的分辨率。但这种方式需要自己处理大量投影转换逻辑，而且Leaflet的核心设计是围绕EPSG:3857的，很容易出现缩放级别不匹配、切片偏移等问题，非常不推荐。

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