SOURCE

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

const selectedBuilings = {
  "type": "FeatureCollection",
  "features": []
}

const addHighlightLayer = (map) => {
  map.addSource('builidng-highlight', {
    'type': 'geojson',
    'data': selectedBuilings
  })
  map.addLayer({
    "id": "builidng-highlight",
    "type": "fill-extrusion",
    "source": "builidng-highlight",
    "minzoom": 15,
    "paint": {
        "fill-extrusion-color": "hsl(90, 67%, 85%)",
        "fill-extrusion-height": [
            "get",
            "height"
        ],
        "fill-extrusion-opacity": 1.0
    }
  }, 'building-extrusion')
}

const createPopup = (lngLat, content) => {
  new mapboxgl.Popup({offset: [0, -20]}).setLngLat(lngLat).setText(content).addTo(map)
}

map.on('load', () => {
  addHighlightLayer(map)
})

map.on('click', (e) => {
  const bbox = [
    [e.point.x - 5, e.point.y - 5],
    [e.point.x + 5, e.point.y + 5]
  ];
  const selectedFeatures = map.queryRenderedFeatures(bbox, {
    layers: ['building-extrusion']
  });
  selectedBuilings.features = selectedFeatures
  map.getSource('builidng-highlight').setData(selectedBuilings)

  if (selectedFeatures.length > 0) {
    createPopup(e.lngLat, '无信息')
  }
})

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

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