SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mohong/ckn72s1h90p6k17nvnox6d3ms',
    center: [116.40355, 39.91737],
    zoom: 12
});

const router = {
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            116.373478,
            39.931627
          ],
          [
            116.400267,
            39.932205
          ],
          [
            116.400697,
            39.922222
          ],
          [
            116.385312,
            39.921562
          ],
          [
            116.385958,
            39.911412
          ],
          [
            116.400482,
            39.912237
          ],
          [
            116.400482,
            39.906543
          ],
          [
            116.412317,
            39.907121
          ]
        ],
        "type": "LineString"
      },
      "id": "ca19b913361efc610472de288657bafd"
    }
  ],
  "type": "FeatureCollection"
}

// 绿色
const color = '#7DF9A6'

// 橘色
// const color = '#E4A571'

map.on('style.load', () => {
    map.addLayer({
        "id": "route1",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": router
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": color,
            "line-width": 20,
            "line-opacity": 0.4,
            "line-blur": 9
        }
    });
    map.addLayer({
        "id": "route2",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": router
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": color,
            "line-width": 8,
            "line-opacity": 0.4,
            "line-blur": 3
        }
    });
    map.addLayer({
        "id": "route3",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": router
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": color,
            "line-width": 10,
            "line-opacity": 0.4,
            "line-blur": 1
        }
    });
    map.addLayer({
        "id": "route4",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": router
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": color,
            "line-width": 3
        }
    });
    map.addLayer({
        "id": "route5",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": router
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#fff",
            "line-width": 1
        }
    });
})

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

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