How to solve the problem that the map location will be out of order when leafletjs loads the map WMTS and sets the CRS to 4326?

< H2 > case 1: < / H2 >

the tile type is vec_w
CRS is default

// 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)
    })

are all normal

2:

vec_c
CRS



3:

vec_c
CRSL.CRS.EPSG4326



the bosses passing by help to see how to solve this problem, and the map disorder problem in case 3 can be fixed.

Mar.23,2021

after a series of searching, the answer to the question is finally found:
the reason is that the EPSG4326 of the map of heaven and earth is one level lower than that of the international wmts, and the scale in the source code needs to be modified

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

Thank you for having adopted the answer to point out that the problem lies in "the EPSG4326 of the sky map is one level lower than that of the international wmts", and has clicked "helpful".

but there is actually a simpler solution:

there is a zoomOffset property (zoom offset) in the

L.tilelayer method options, which is set to 1

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