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: 11
});

const polygon = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              476.38495445251465,
              39.91164547966979
            ],
            [
              476.3964986801148,
              39.91164547966979
            ],
            [
              476.3964986801148,
              39.921717512624866
            ],
            [
              476.38495445251465,
              39.921717512624866
            ],
            [
              476.38495445251465,
              39.91164547966979
            ]
          ]
        ]
      }
    }
  ]
}

map.on('style.load', () => {
    map.addSource('polygonSource', {
        type: 'geojson',
        data: polygon
    })
    map.addLayer({
        id: 'polygonLayer',
        type: 'fill',
        source: 'polygonSource',
        layout: {},
        paint: {
            'fill-color': '#479AFF',
            'fill-opacity': 0.2
        }
    })
})

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

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