SOURCE

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

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


/**
 * 画曲线
 * @point_start  {String} 起点坐标 "114.30911,30.600052"
 * @point_end {String} 起点坐标  "114.30911,30.600052"
 * @num {Number} 坐标点个数
 * @w {Number} 弯曲度
 * @return {Array} 曲线坐标点
 */
function calcCoorArr(point_start, point_end, num, w) {
    //第一步把坐标字符串转为对象,为了方便计算转为了数字格式
    var p_start = { x: parseFloat(point_start.split(",")[0]), y: parseFloat(point_start.split(",")[1]) };
    var p_end = { x: parseFloat(point_end.split(",")[0]), y: parseFloat(point_end.split(",")[1]) };
    //此处敲黑板，是任务的第二大难点，求出相对的第三个点，用于固定曲线的弯曲度，下面公式是已知三角形两点坐标和两个坐标点的夹角求第三点坐标，两个夹角我们是自定义任意值，不过不要加起来超过180度
    let x3 = (p_start.x * w + p_end.x * w - p_start.y + p_end.y) / (2 * w)
    let y3 = (p_start.y * w + p_end.y * w - p_end.x + p_start.x) / (2 * w)
    var p_crt1 = { x: x3, y: y3 };
    var p_crt2 = { x: x3, y: y3 };
    let paths = [];
    for (let i = 0; i < num + 1; i++) {
        let t = i / num;
        var _matrix1 = [1, t, t * t, t * t * t];
        var _matrix2 = [
            [1, 0, 0, 0]
            , [-3, 3, 0, 0]
            , [3, -6, 3, 0]
            , [-1, 3, -3, 1]
        ];
        var _matrix3 = [
            [p_start.x, p_start.y]
            , [p_crt1.x, p_crt1.y]
            , [p_crt2.x, p_crt2.y]
            , [p_end.x, p_end.y]
        ];
        var _matrix_tmp = [
            _matrix1[0] * _matrix2[0][0] + _matrix1[1] * _matrix2[1][0] + _matrix1[2] * _matrix2[2][0] + _matrix1[3] * _matrix2[3][0]
            , _matrix1[0] * _matrix2[0][1] + _matrix1[1] * _matrix2[1][1] + _matrix1[2] * _matrix2[2][1] + _matrix1[3] * _matrix2[3][1]
            , _matrix1[0] * _matrix2[0][2] + _matrix1[1] * _matrix2[1][2] + _matrix1[2] * _matrix2[2][2] + _matrix1[3] * _matrix2[3][2]
            , _matrix1[0] * _matrix2[0][3] + _matrix1[1] * _matrix2[1][3] + _matrix1[2] * _matrix2[2][3] + _matrix1[3] * _matrix2[3][3]
        ];
        var _matrix_final = [
            _matrix_tmp[0] * _matrix3[0][0] + _matrix_tmp[1] * _matrix3[1][0] + _matrix_tmp[2] * _matrix3[2][0] + _matrix_tmp[3] * _matrix3[3][0]
            , _matrix_tmp[0] * _matrix3[0][1] + _matrix_tmp[1] * _matrix3[1][1] + _matrix_tmp[2] * _matrix3[2][1] + _matrix_tmp[3] * _matrix3[3][1]
        ];

        var _res_point = [_matrix_final[1], _matrix_final[0]];
        paths.push(_res_point);
    }
    return paths;
}

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

        const style = map.getStyle()
        const sources = Object.keys(style.sources)
        const layers = style.layers.map(o => o.id)
        setMapStyleFn('mapbox://styles/mapbox/satellite-v9', {
            map,
            style: 'mapbox://styles/mapbox/' + layerId,
            sourcesList: sources,
            layersList: layers
        })
        // const style = map.getStyle().sources
        // console.info(style)
    };
}

map.on('load', () => {
  // Add a data source containing GeoJSON data.
  map.addSource('maine', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        // These coordinates outline Maine.
        'coordinates': [
          [
            [-67.13734, 45.13745],
            [-66.96466, 44.8097],
            [-68.03252, 44.3252],
            [-69.06, 43.98],
            [-70.11617, 43.68405],
            [-70.64573, 43.09008],
            [-70.75102, 43.08003],
            [-70.79761, 43.21973],
            [-70.98176, 43.36789],
            [-70.94416, 43.46633],
            [-71.08482, 45.30524],
            [-70.66002, 45.46022],
            [-70.30495, 45.91479],
            [-70.00014, 46.69317],
            [-69.23708, 47.44777],
            [-68.90478, 47.18479],
            [-68.2343, 47.35462],
            [-67.79035, 47.06624],
            [-67.79141, 45.70258],
            [-67.13734, 45.13745]
          ]
        ]
      }
    }
  });

  // Add a new layer to visualize the polygon.
  map.addLayer({
    'id': 'maine',
    'type': 'fill',
    'source': 'maine', // reference the data source
    'layout': {},
    'paint': {
      'fill-color': '#0080ff', // blue color fill
      'fill-opacity': 0.5
    }
  });
  // Add a black outline around the polygon.
  map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'maine',
    'layout': {},
    'paint': {
      'line-color': '#000',
      'line-width': 3
    }
  })
    
const style = map.getStyle()
console.info(Object.keys(style.sources))
console.info(style.layers.map(o => o.id))
})

var setMapStyleFn = function (defaultStyle, { map, style, sourcesList, layersList }) {
    let prevStyle = defaultStyle
    // return (props) => {
        // const { map, style, sourcesList, layersList } = props
        if (!map || !style || !layersList || !sourcesList) {
            return
        }

        // if (deepEqual(prevStyle, style)) {
        //     return
        // }
        prevStyle = style

        const mapStyle = map.getStyle();
        if (!mapStyle) {
            return
        }
        const layers = (mapStyle.layers || []).filter((layer) => layersList.includes(layer.id));
        const sources = Object.keys((mapStyle.sources || {})).filter((key) => {
            return sourcesList.includes(key)
        }).reduce((prev, result) => {
            prev[result] = (mapStyle.sources || {})[result];
            return prev;
        }, {});

        const handleStyle = () => {
            Object.keys(sources).forEach((key) => {
                const existing = map.getSource(key);
                if (!existing) {
                    map.addSource(key, sources[key]);
                }
            });
            layers.forEach((layer) => {
                const existing = map.getLayer(layer.id);
                if (!existing) {
                    map.addLayer(layer)
                }
            });
            map.off('style.load', handleStyle);
        }
        map.on('style.load', handleStyle);

        map.setStyle(style, { diff: true });
    // }
}

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

<div id="menu">
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" checked="checked">
    <!-- 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">
    <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;
    }