SOURCE

const layersConfig={
    streets:'https://zhejiang.tianditu.gov.cn/vtiles/styles/tdt/streets_zw.json',
    dark:'https://zhejiang.tianditu.gov.cn/vtiles/styles/tdt/dark.json',
    img:'https://zhejiang.tianditu.gov.cn/vtiles/styles/tdt/img.json',
    red:'https://zhejiang.tianditu.gov.cn/vtiles/styles/tdt/streets_red.json',
    img_20cm:'https://zhejiang.tianditu.gov.cn/vtiles/styles/tdt/img_20cm.json',
    hillshade:'https://zhejiang.tianditu.gov.cn/vtiles/styles/tdt/hillshade.json'
}
const map = new mapboxgl.Map({
    container: 'map',
    style: layersConfig.streets,
    center: [120.14990061847072,30.26531885127308],
    zoom: 17,
    pitch:60
});
map.on('load', () => {
    map.resize()
    const marker=new mapboxgl.Marker({
        color: '#4264fb',
    }).setLngLat([120.14990061847072,30.26531885127308]).addTo(map)
    const popup = new mapboxgl.Popup({ closeOnClick: false})
    .setLngLat([120.14990061847072,30.26531885127308])
    .setHTML("<p>这里是杭州</p>")
    .setOffset(33)
    .addTo(map);
});
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 = layersConfig[e.target.value]
    map.setStyle(type)
})

<div id='map'></div>
<select name="select" id="select">
    <option value="streets" selected>标准</option>
    <option value="dark"">黑夜</option>
    <option value="img"">影像</option>
    <option value="img_20cm"">高清影像</option>
    <option value="red"">红色地图</option>
    <option value="hillshade"">地形(晕渲)</option>
</select>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}
select {
    position: absolute;
    right: 10px;
    top: 10px;
}

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