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)
})

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

const geojson = {
    type: 'Feature',
    geometry: {
        type: 'LineString',
        coordinates: [[119.3, 29.5], [119.8, 30.3]]
    }
}

function loadSource(event) {
    if (event.dataType === 'style') {
        addLayer()
        map.off('data', loadSource)
    }
}


function addLayer() {
    map.addSource('line', {
        type: 'geojson',
        data: geojson
    })

    map.addLayer({
        'id': 'line',
        'type': 'line',
        'source': 'line',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': 'red',
            'line-width': 8
        }
    });
}

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

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

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

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

.mapboxgl-ctrl-scale {
    background-color: white;
}