SOURCE

L.TileLayer.WMTS = L.TileLayer.extend({
    defaultWmtsParams: {
        service: 'WMTS',
		request: 'GetTile',
		version: '1.0.0',
		layer: '',
		style: '',
		tilematrixset: '',
		format: 'image/jpeg'
    },

    initialize: function (url, options) { // (String, Object)
        this._url = url;
		var lOptions= {};
		var cOptions = Object.keys(options);
		cOptions.forEach(element=>{
 		  lOptions[element.toLowerCase()]=options[element];
		});
        var wmtsParams = L.extend({}, this.defaultWmtsParams);
        var tileSize = lOptions.tileSize || this.options.tileSize;
        if (lOptions.detectRetina && L.Browser.retina) {
            wmtsParams.width = wmtsParams.height = tileSize * 2;
        } else {
            wmtsParams.width = wmtsParams.height = tileSize;
        }
        for (var i in lOptions) {
            // all keys that are in defaultWmtsParams options go to WMTS params
            if (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {
				wmtsParams[i] = lOptions[i];
			}
        }
        this.wmtsParams = wmtsParams;
        this.matrixIds = options.matrixIds||this.getDefaultMatrix();
        L.setOptions(this, options);
    },

    onAdd: function (map) {
        this._crs = this.options.crs || map.options.crs;
        L.TileLayer.prototype.onAdd.call(this, map);
    },

    getTileUrl: function (coords) { // (Point, Number) -> String
        var tileSize = this.options.tileSize;
        var nwPoint = coords.multiplyBy(tileSize);
        nwPoint.x+=1;
        nwPoint.y-=1;
        var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));
        var zoom = this._tileZoom;
        var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
        var se = this._crs.project(this._map.unproject(sePoint, zoom));
        tilewidth = se.x-nw.x;
        var ident = this.matrixIds[zoom].identifier;
        var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
        var X0 = this.matrixIds[zoom].topLeftCorner.lng;
        var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
        var tilecol=Math.floor((nw.x-X0)/tilewidth);
        var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
        var url = L.Util.template(this._url, {s: this._getSubdomain(coords)});
        return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;
    },

    setParams: function (params, noRedraw) {
        L.extend(this.wmtsParams, params);
        if (!noRedraw) {
            this.redraw();
        }
        return this;
    },
    
    getDefaultMatrix : function () {
        /**
         * the matrix3857 represents the projection 
         * for in the IGN WMTS for the google coordinates.
         */
        var matrixIds3857 = new Array(22);
        for (var i= 0; i<22; i++) {
            matrixIds3857[i]= {
                identifier    : "" + i,
                topLeftCorner : new L.LatLng(20037508.3428,-20037508.3428)
            };
        }
        return matrixIds3857;
    }
});

L.tileLayer.wmts = function (url, options) {
    return new L.TileLayer.WMTS(url, options);
};

const token = 'bd1a8363d944b631e725a3055e5342d8';
let baseLayers ={
    "天地图":L.layerGroup([
        L.tileLayer('https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk='+token),
        L.tileLayer('https://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk='+token)
        ]),
    "广州":L.tileLayer('http://221.221.138.186:24060/gh?z={z}&x={x}&y={y}&ticket=60d2ff2c-b676-11ea-ace2-0242ac110018'),
    "OpenStreetMap":L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
    "Google": L.tileLayer('http://mt1.google.cn/maps/vt?lyrs=s@40821&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}'),
    "Geoq": L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}')
}

let growthRadioValue = $('#growthRadioValue').val();
let 作物长势 = new L.TileLayer.WMTS("http://221.221.138.186:17180/geoserver/gwc/service/wmts",{
                'LAYER': 'lizhiyuan:' + growthRadioValue,  //图层名称
                'STYLE': '',    //样式
                'TILEMATRIXSET': 'EPSG:900913', //服务器提供了4326和900913，leaflet只能用 900913
                'FORMAT': 'image/png',  //输出的格式
                "transparent":true,
                // crs:L.CRS.EPSG4326
            })
$('#growthRadioValue').change(function(ev){
    作物长势.setParams({
        "LAYER": 'lizhiyuan:' + this.value
    })
})

let overlays ={
    "万和医药园":L.marker([22.5533333, 113.93666666666667]), // IPHONE 自带指南针读取的经纬度数据
    作物长势,
}
var map = L.map('map',{
    center:[22.5533333, 113.93666666666667],
    zoom:15,
    layers:[
        baseLayers.天地图,
        overlays.万和医药园,
        overlays.作物长势
        ]
});
L.control.layers(baseLayers, overlays).addTo(map);

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet-src.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class=".input">
    作物长势:<select id='growthRadioValue'>
        <option>20200130little</option>
        <option>20200224little</option>
        <option>20200429little</option>
    </select>
    </div>
    <div id="map"></div>
</body>
</html>

#map{
    width: 100%;
    height: calc( 100vh - 30px );
}

.input{
    padding: 5px;
}