SOURCE

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

const center = [116.40355, 39.91737];
let i = 1
map.on('load', () => {
    addCircle()
    let timer = setInterval(() => {
        // 用定时器模拟鼠标拖动滑竿,每次拖动滑竿时，调用updateCircle方法可以修改圆的大小
        updateCircle(i, center)
        if (++i > 100) {
            clearInterval(timer)
        }
    }, 50)
})

// 增加圆的图层
function addCircle () {
    map.addSource('circle', {
        type: 'geojson',
        data: {
            type: 'Polygon',
            coordinates: [[]]
        }
    })
    map.addLayer({
        id: 'circle',
        type: 'fill',
        source: 'circle',
        paint: {
            'fill-color': 'green', // 填充颜色
            'fill-opacity': 0.3, // 透明度
            'fill-outline-color': 'green' // 边缘颜色
        }
    })
}

/**
 * radius: 半径，单位为米，不能为0；
 * center: 圆心
 * 
 * 如果用npm，导入circle方法：
 * npm install @turf/circle
 * import circle from '@turf/circle'
 * const geojson = circle(center, r);
 */
function updateCircle (radius, center) {
    const r = radius/1000;
    const geojson = turf.circle(center, r);
    map.getSource('circle').setData(geojson)
}

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

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