SOURCE

console.log(L)

// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{
//     attribution:`&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`
// }).addTo(map)

var imgMapLayer0 = L.tileLayer(`http://t0.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=faed44eb8716fbc8bc9978d8e44ab7b4`,{
    // maxZoom : 18,
    // minZoom : 1 ,
    // tileSize : 256,
    // zoomOffset : 1
}),
imgMapLayer1 = L.tileLayer(`http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=faed44eb8716fbc8bc9978d8e44ab7b4`,{
  maxZoom : 18,
    minZoom : 1 ,
    tileSize : 256,
    zoomOffset : 1 
});

var basemap0 = L.layerGroup([imgMapLayer0,imgMapLayer1])

var vecMapLayer0 = L.tileLayer(`http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=faed44eb8716fbc8bc9978d8e44ab7b4`,{
    maxZoom : 18,
    minZoom : 1 ,
    tileSize : 256,
    zoomOffset : 1
}),
vecMapLayer1 = L.tileLayer(`http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=faed44eb8716fbc8bc9978d8e44ab7b4`,{
  maxZoom : 18,
    minZoom : 1 ,
    tileSize : 256,
    zoomOffset : 1 
});
var basemap1 = L.layerGroup([vecMapLayer0,vecMapLayer1])

var map = L.map('map',{
    preferCanvas : true ,
    center:[31, 103],
    // crs : L.CRS.EPSG4326,
    // layers : [basemap0 , basemap1],
    zoomControl:true ,
    attributionControl:false ,
    doubleClickZoom:false ,
    editable:true
}) .setView(L.latLng(31, 103),13)
imgMapLayer0.addTo(map)
L.polyline([[31, 103],[31.2, 103.3]],{color:'red'}).addTo(map)
// const baseLayers = {
//     imgMapLayer0 ,
//     imgMapLayer1 ,
//     vecMapLayer0 ,
//     vecMapLayer1
// }

// const layerControl = L.control.layers(baseLayers).addTo(map)

// basemap0.addTo(map)



L.marker([31, 103]).addTo(map).openPopup()

<div id="map"> leaflet map</div>

#map{
    width:400px;
    height: 300px;
}