'How add a wmts layer to leaflet map via geoserver

i am working on making a web mapping project using leaflet and geoserver in addition, i want to load a layer via the wmts where i need to define the url ,tilematrixSet,... i have tried it with openlayers and it works just like this

        **var projection = ol.proj.get('EPSG:4326');
        var projectionExtent = projection.getExtent();
        var mapExtent = [-180.0,-90.0,180.0,90.0]; 
        var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
        var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
        var layer_wmts=new ol.layer.Tile({
            title:"My layer",
            source: new ol.source.WMTS({
                url: 'http://localhost:8080/geoserver/gwc/service/wmts?',
                layer: 'store_DB:layer',
                matrixSet: 'EPSG:4326',
                format: 'image/png',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                })
            })});**

My question is , how to do the same thing using leaflet



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source