如何在mapbox on中添加多个in？

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

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

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: 12
});

// 添加多个in
map.on('load', function() {
  map.addLayer({
    id: 'in1',
    type: 'circle',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [lng1, lat1]
          }
        }]
      }
    },
    paint: {
      'circle-radius': 6,
      'circle-color': '#FF0000'
    }
  });

  map.addLayer({
    id: 'in2',
    type: 'circle',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [lng2, lat2]
          }
        }]
      }
    },
    paint: {
      'circle-radius': 6,
      'circle-color': '#00FF00'
    }
  });
});