如何解决leafletjs 加载天地图WMTS时 把CRS设置成4326之后 地图位置会出现错乱的情况

Question

情况1：

瓦片类型为vec_w
CRS为默认

// 扩展天地图tile瓦片加载方法
    L.TileLayer.TdtLayer = L.TileLayer.extend({
        getTileUrl: function (coords) {
            var layerType = 'w'
            return "http://t0.tianditu.cn/" +
                "vec_" + layerType +
                "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&" +
                "TILEMATRIXSET=" + layerType + "&FORMAT=tiles&TILECOL=" +
                coords.x + "&TILEROW=" +
                coords.y + "&TILEMATRIX=" + coords.z;
        }
    });
    
    L.tileLayer.tdtLayer = function (options) {
        return new L.TileLayer.TdtLayer(null, options)
    }
    
    var map = L.map('map', {
        center: [
            31.90059,
            120.584663
        ],
        zoom: 1
    });
    
    var tdtTile = L.tileLayer.tdtLayer({
        layerType: 'vec',
        tms: true
    });
    
     map.addLayer(tdtTile);

    map.on('click', function (e) {
        console.log(e.latlng)
    })

都是正常的

情况2：

瓦片类型为vec_c
CRS为默认

// 扩展天地图tile瓦片加载方法
        L.TileLayer.TdtLayer = L.TileLayer.extend({
            getTileUrl: function (coords) {
                var layerType = 'c'
                return "http://t0.tianditu.cn/" +
                    "vec_" + layerType +
                    "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&" +
                    "TILEMATRIXSET=" + layerType + "&FORMAT=tiles&TILECOL=" +
                    coords.x + "&TILEROW=" +
                    coords.y + "&TILEMATRIX=" + coords.z;
            }
        });

        L.tileLayer.tdtLayer = function (options) {
            return new L.TileLayer.TdtLayer(null, options)
        }

        var map = L.map('map', {
            center: [
                31.90059,
                120.584663
            ],
            zoom: 1
        });

        var tdtTile = L.tileLayer.tdtLayer({
            layerType: 'vec',
            tms: true
        });

        map.addLayer(tdtTile);
        map.on('click', function (e) {
            console.log(e.latlng)
        })

地图纵向出现偏移

情况3：

瓦片类型为vec_c
CRS为L.CRS.EPSG4326

// 扩展天地图tile瓦片加载方法
        L.TileLayer.TdtLayer = L.TileLayer.extend({
            getTileUrl: function (coords) {
                var layerType = 'c'
                return "http://t0.tianditu.cn/" +
                    "vec_" + layerType +
                    "/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&" +
                    "TILEMATRIXSET=" + layerType + "&FORMAT=tiles&TILECOL=" +
                    coords.x + "&TILEROW=" +
                    coords.y + "&TILEMATRIX=" + coords.z;
            }
        });

        L.tileLayer.tdtLayer = function (options) {
            return new L.TileLayer.TdtLayer(null, options)
        }

        var map = L.map('map', {
            crs: L.CRS.EPSG4326, //L.CRS.EPSG4326
            center: [
                31.90059,
                120.584663
            ],
            zoom: 1
        });

        var tdtTile = L.tileLayer.tdtLayer({
            layerType: 'vec',
            tms: true
        });

        map.addLayer(tdtTile);
        map.on('click', function (e) {
            console.log(e.latlng)
        })

地图发生了验证的偏移问题

走过路过的大佬们帮忙看些怎么才能解决这个问题，可以情况3的地图错乱问题修复了。

Answer 1

经过一系列的查找，提问终于找到答案：
原因是因为天地图的EPSG4326跟国际wmts差了一级，需要修改一下源码里面的比例尺

scale: function (zoom) {
        if(this.code == 'EPSG:4326') {
            return 256 * Math.pow(2, zoom-1);
        }
        return 256 * Math.pow(2, zoom);
    },

Answer 2

感谢已采纳答案指出问题所在『天地图的EPSG4326跟国际wmts差了一级』，已点『有帮助』。

不过实际上还有更简单的解决方法：

L.tilelayer 方法 options 中有个 zoomOffset 属性（缩放偏移），设置成 1 就行了

L.tilelayer(url, {
    zoomOffset: 1,
})