效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.js"></script>
<style>
#map {
position: absolute;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id='map'>
</div>
<script>
var basemapLayer0 = L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
{
maxZoom: 18,
minZoom: 1,
tileSize: 256,
zoomOffset: 1
});
var basemapLayer1 = L.tileLayer('http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
{
maxZoom: 18,
minZoom: 1,
tileSize: 256,
zoomOffset: 1
});
var basemapLayer2 = L.tileLayer('http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
{
maxZoom: 18,
minZoom: 1,
tileSize: 256,
zoomOffset: 1
});
var basemapLayer3 = L.tileLayer('http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=174705aebfe31b79b3587279e211cb9a',
{
maxZoom: 18,
minZoom: 1,
tileSize: 256,
zoomOffset: 1
});
var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);
let map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
layers: [basemap1],
zoomControl: false,
attributionControl: false,
doubleClickZoom: false,
editable: true//绘制控件
}).setView([29.592024, 106.231126], 13);
</script>
</body>
</html>