Leaflet load day map

Code

    var map = L.map('map').setView([31, 121], 5);
    const tdt_img = L.tileLayer('http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=13aaaf7907b41c2e04034d430da1ce36', {
    
        subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
        transparent: true,
        zIndex: 3,
    });
    const tdt_cia = L.tileLayer('http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=13aaaf7907b41c2e04034d430da1ce36', {
    
        subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
        transparent: true,
        zIndex: 3,
    });
    const tdt=L.layerGroup([tdt_img,tdt_cia]).addTo(map);
    var baseLayers = {
    
        " Sky map ": tdt,
    };
    var mapCtrl = L.control.layers(baseLayers).addTo(map);

design sketch