SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibGVla2U5OCIsImEiOiJjazNzZGxlMHQwNjAxM21tdHh3NmJyOWJ0In0.nhCMjub5PhQqzFOSNB9uMw';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/light-v10', // style URL
    center: [116.018446, 37.676622], // starting position [lng, lat]
    zoom: 6 // starting zoom
});

const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');

for (const input of inputs) {
    input.onclick = (layer) => {
        const layerId = layer.target.id;
        map.setStyle('mapbox://styles/mapbox/' + layerId);
    };
}

map.on('load', () => {
    map.loadImage('https://kydl.kyslb.com/bjmap/map-example/asset/mass2.png', (err, img) => {
        console.info('1234', err)
        if (err) {
          console.log('err' + item.imgName, err)
          return
        }
        if (!map.hasImage(item.imgName)) {
          map.addImage(item.imgName, img)
        }
        console.log('err' + item.imgName, err)
        map.addLayer({
            id: 'this.layerId',
            source: 'this.sourceId',
            type: 'symbol',
            layout: {
                'icon-image': ['get', 'icon'],
                'icon-rotate': ['get', 'bearing'],
                'icon-size': ['get', 'iconsize'],
                'symbol-sort-key': ['get', 'style'], // 排序的参考值（可选，无默认值。值越大，越在上方）
                'symbol-z-order': 'auto',
                'icon-anchor': ['get', 'iconanchor'],
                'icon-rotation-alignment': 'map',
                'icon-allow-overlap': this.isBump, // 图标允许压盖
                'icon-ignore-placement': this.isBump, // 碰撞也可以被看到
                'text-field': ['get', 'textField'],
                'text-font': ['Open Sans Bold'],
                'text-size': ['get', 'textSize'],
                'text-justify': 'center',
                'text-allow-overlap': this.isBump,
                'text-ignore-placement': this.isBump,
                'text-offset': ['get', 'textOffset'],
                'text-line-height': ['get', 'textLineHeight']
            },
            paint: {
                'text-color': ['get', 'textColor'],
                'text-opacity': ['get', 'textOpacity']
            }
        })
    })
})

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

<div id="menu">
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite">
    <!-- See a list of Mapbox-hosted public styles at -->
    <!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
    <label for="satellite-v9">satellite</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light" checked="checked">
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark">
    <label for="dark-v10">dark</label>
    <input id="streets-v11" type="radio" name="rtoggle" value="streets">
    <label for="streets-v11">streets</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors">
    <label for="outdoors-v11">outdoors</label>
</div>

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

#menu {
    position: absolute;
    background: #efefef;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
}