SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-zh-v1',
    center: [117.27822661399841, 34.207516694264385],
    zoom: 16
});

// 关键代码
const textLayer = {
    id: 'administration-text',
    type: 'symbol',
    minzoom: 5, 
    maxzoom: 20,
    source: {
        type: 'geojson',
        data: {
            "type": "FeatureCollection",
            "features": [
                {
                "type": "Feature",
                "properties": {
                    "name": "徐州市行政中心"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                    117.27822661399841,
                    34.207516694264385
                    ]
                }
                }
            ]
            }
    },
    layout: {
        'text-field': ['get', 'name'],
        'text-size': 30,
        'text-allow-overlap': true,
        'text-ignore-placement': true
    },
    paint: {
        'text-color': '#fff'
    }
}

map.on('style.load', () => {

    // 关键代码：

    // 将以上图层增加到地图对象中，vue中请在created阶段操作
    map.addLayer(textLayer)
    
    // 从地图上删除该图层，vue中请在beforeDestroy阶段执行一下
    // map.removeLayer('administration-text')
    // map.removeSource('administration-text')

})

<div id='map'></div>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}