SOURCE

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 9,
    center: [119.3, 29.7],
    pitch: 60,
    bearing: 0,
    style: 'https://openmap.tech/styles/streets.json',
    hash: true
});

document.getElementById('select').addEventListener('change', function (e) {
    var type = e.target.value
    map.setStyle('https://openmap.tech/styles/' + type + '.json')
    map.on('data', loadSource)
})

// checkbox 控制
const checkbox = document.getElementById('checkbox')
checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
        removeTerrain()
    } else {
        addTerrain()
    }
})

// 地图缩放级别控制
map.on('zoomend', function() {
    const zoom = map.getZoom()
    if (zoom > 12) {
        removeTerrain()
    } else {
        addTerrain()
    }
})

function addTerrain() {
    map.setTerrain({
        "source": "dem",
        "exaggeration": 1.5
    })
}

function removeTerrain() {
    map.setTerrain()
}

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

<select name="select" id="select">
    <option value="streets" selected>标准</option>
    <option value="terrain"">地形</option>
    <option value="img"">影像</option>
</select>


<div class="panel">
    <input type="checkbox" id="checkbox" @change="change">
    <label for="checkbox">地形</label>
</div>

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
}

select {
    position: absolute;
    right: 10px;
    top: 10px;
}

.panel {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1111;
    color: white;
    background: gray;
    padding: 3px 6px;
}