SOURCE

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

var scale = new mapboxgl.ScaleControl({
    maxWidth: 80,
    unit: 'imperial'
});
map.addControl(scale);
 
scale.setUnit('metric');

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

map.easeTo({
    center: [119.5, 30.1],
    zoom: 14,
    speed: 0.2,
    curve: 1,
    duration: 5000,
})

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

<select name="select" id="select">
    <option value="img"">影像</option>
    <option value="streets" selected>标准</option>
    <option value="terrain"">地形</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;
}