SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibGVla2U5OCIsImEiOiJjazNzZGxlMHQwNjAxM21tdHh3NmJyOWJ0In0.nhCMjub5PhQqzFOSNB9uMw';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [114.137343, 38.137451], // starting position [lng, lat]
    zoom: 4 // starting zoom
});

// var vectorLayerUrl = "http://t0.tianditu.com/vec_w/wmts?tk=e2dd49efda0d7370f1d303c257d8a645" + 
// "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";

// var vectorLayerUrl = "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={x}&TILECOL={y}&tk=e2dd49efda0d7370f1d303c257d8a645";
var vectorLayerUrl = "http://t{0-7}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=3602668176205a735014c430d4bfd5c4";

map.on('load', function () {

    map.addSource('wmts-source', {
        'type': 'vector',
        'tiles': [
            vectorLayerUrl
        ],
        'tileSize': 256
    });
    map.addLayer({
        'id': 'wmts-layer',
        'type': 'raster',
        'source': 'wmts-source',
        'paint': {
            'raster-opacity': 0.8
        }
    });
});

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

<div id="menu">
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" checked="checked">
    <!-- See a list of Mapbox-hosted public styles at -->
    <!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
    <label for="satellite-v9">satellite</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light">
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark">
    <label for="dark-v10">dark</label>
    <input id="streets-v11" type="radio" name="rtoggle" value="streets">
    <label for="streets-v11">streets</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors">
    <label for="outdoors-v11">outdoors</label>
</div>

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #menu {
        position: absolute;
        background: #efefef;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }