SOURCE

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

const style = {
    version: 8,
    name: "tianditu",
    sprite : "mapbox://sprites/mapbox/streets-v8",
    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    sources: {
            // 天地图电子标记
        tianditu_cav: {
            type: 'raster',
            tiles: [
                'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
                'https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
            ],
            tileSize: 256
        },
        // 天地图电子底图
        tianditu_vec: {
            type: 'raster',
            tiles: [
                'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
                'https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',
            ],
            tileSize: 256
        },
        // 天地图影像图
        tianditu_img: {
            type: 'raster',
            tiles: [
                'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4'
            ],
            tileSize: 256
        },
        tianditu_cia: {
            type: 'raster',
            tiles: [
                'https://t1.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4'
            ],
            tileSize: 256
        }
    },
    layers: [
        {
            id: "tianditu_img",
            type: "raster",
            source: "tianditu_img",
            minzoom: 0,
            maxzoom: 22,
            layout: {
                "visibility": "none"
            }
        },
        {
            id: "tianditu_vec",
            type: "raster",
            source: "tianditu_vec",
            minzoom: 0,
            maxzoom: 22
        },
        {
            id: "tianditu_cav",
            type: "raster",
            source: "tianditu_cav",
            minzoom: 0,
            maxzoom: 22
        },
        {
            id: 'tianditu_cia',
            type: 'raster',
            source: 'tianditu_cia',
            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;
}