使用Mapbox-gl-js按JSON属性过滤聚类点

var map = new mapboxgl.Map({
  container: 'map-container',
  center: [longitude, latitude],
  zoom: zoomLevel
});

map.addSource('cluster-data', {
  type: 'geojson',
  data: 'data.geojson'
});

map.addLayer({
  id: 'clusters',
  type: 'circle',
  source: 'cluster-data',
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': '#51bbd6',
    'circle-radius': [
      'step',
      ['get', 'point_count'],
      20,
      100,
      30,
      750,
      40
    ]
  }
});

map.addLayer({
  id: 'cluster-markers',
  type: 'symbol',
  source: 'cluster-data',
  filter: ['has', 'point_count'],
  layout: {
    'text-field': '{point_count_abbreviated}',
    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
    'text-size': 12
  },
  paint: {
    'text-color': '#ffffff'
  }
});

map.addLayer({
  id: 'unclustered-markers',
  type: 'circle',
  source: 'cluster-data',
  filter: ['!', ['has', 'point_count']],
  paint: {
    'circle-color': '#11b4da',
    'circle-radius': 6,
    'circle-stroke-width': 1,
    'circle-stroke-color': '#fff'
  }
});

map.on('click', 'clusters', function (e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['clusters']
  });
  var clusterId = features[0].properties.cluster_id;
  map.getSource('cluster-data').getClusterExpansionZoom(clusterId, function (err, zoom) {
    if (err) return;
    map.easeTo({
      center: features[0].geometry.coordinates,
      zoom: zoom
    });
  });
});

map.on('click', 'unclustered-markers', function (e) {
  var coordinates = e.features[0].geometry.coordinates.slice();
  var description = e.features[0].properties.description;

  new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(description)
    .addTo(map);
});