SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const BEIJING_COORDINATE = [116.39123296750768, 39.907180309385694];

// http可以，但是https就不行了

const style = {
    version: 8,
    name: "tianditu",
    sprite: "mapbox://sprites/mapbox/streets-v8",
    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    sources: {
        tianditu_vec: {
            type: 'raster',
            tiles: [
                'https://t0.tianditu.com/vec_w/wmts?tk=3602668176205a735014c430d4bfd5c4&service=WMTS&version=1.0.0&request=GetTile&layer=vec&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}'
            ],
            tileSize: 256
        },
        tianditu_cva: {
            type: 'raster',
            tiles: [
                'https://t0.tianditu.com/cva_w/wmts?tk=3602668176205a735014c430d4bfd5c4&service=WMTS&version=1.0.0&request=GetTile&layer=cva&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}'
            ],
            tileSize: 256
        }
    },
    layers: [
        {
            id: "tianditu_vec",
            type: "raster",
            source: "tianditu_vec",
            minzoom: 0,
            maxzoom: 22
        },
        {
            id: 'tianditu_cva',
            type: 'raster',
            source: 'tianditu_cva',
            minzoom: 0,
            maxzoom: 22
        }
    ]
}

const map = new mapboxgl.Map({
    container: 'map',
    style: style,
    center: [116.40355, 39.91737],
    zoom: 11
});


function changeStyle() {
    map.setLayoutProperty('tianditu_img', 'visibility', 'visible')
    map.setLayoutProperty('tianditu_cia', 'visibility', 'visible')
    map.setLayoutProperty('tianditu_vec', 'visibility', 'none')
    map.setLayoutProperty('tianditu_cav', 'visibility', 'none')
}

<div id='map'></div>
<div class="button-wrapper">
    <button onclick="changeStyle()">切换影像图</button>
</div>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}
.button-wrapper {
    position: absolute;
    left: 10px;
    top: 10px;
}