react-mapbox-gl超级集群未返回正确的功能

Question

我正在使用react-mapbox-gl@3.4.1和supercluster@3.0.2来获取所点击群集中的功能列表。

我在supercluster的 V3.0.0 中看到，缩放因子被编码到cluster_id。

我正在使用GeoJSONLayer进行群集（这可能不是supercluster的正确方法）并且不会返回正确的功能 OnClick 。

单击某些群集会引发运行时错误：

  

＆＃39;没有指定ID为＃39;

的群集

知道为什么没有返回任何功能或错误的功能？

＆＃13;

＆＃13;

import React, { Component } from 'react';
import ReactMap, { Layer, GeoJSONLayer } from 'react-mapbox-gl';
import SuperCluster from 'supercluster';

const accessToken = "pk.eyJ1IjoiYWxleDMxNjUiLCJhIjoiY2o0MHp2cGtiMGFrajMycG5nbzBuY2pjaiJ9.QDApU0XH2v35viSwQuln5w";
const style = "mapbox://styles/mapbox/streets-v9";

const Map = ReactMap({
  accessToken
});

const featureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      "type": "Feature",
      "geometry": { "type": "Point", "coordinates": [-104.9847, 39.73915] },
      "properties": { "id": 1 }
    },
    {
      "type": "Feature",
      "geometry": { "type": "Point", "coordinates": [-104.967478, 39.732269] },
      "properties": { "id": 2 }
    }
  ]
}

const mapStyle = {
  height: '100vh',
  width: '100vw'
};

const cluster = SuperCluster({
  maxZoom: 14,
  radius: 50,
});

class App extends Component {
  componentWillMount () {
    cluster.load(featureCollection.features);
  }
  
  onClick (evt) {
    const map = evt.target;
    const features = map.queryRenderedFeatures(evt.point, { layers: ['clustered_layer'] });
    
    if(!features.length) {
      return;
    }
    const feature = features[0];
    const cluster_id = feature.properties.cluster_id;
    const all_features = cluster.getLeaves(cluster_id, 500);
  }
  
  onStyleLoad (map) {
    map.on('click', 'clustered_layer', this.onClick.bind(this));
  }
  
  render() {
    return (
      <Map
        center={ [-104.9847, 39.73915] }
        containerStyle={mapStyle}
        onStyleLoad={ this.onStyleLoad.bind(this) }
        style={style}
        zoom={[5]}
      >
        <GeoJSONLayer
          id="source_id"
          data={ featureCollection }
          sourceOptions={{
            cluster: true,
            clusterMaxZoom: 14,
            clusterRadius: 50
          }}
        />
        <Layer
          id="clustered_layer"
          type="circle"
          sourceId="source_id"
          filter={ ['has', 'point_count']}
          paint={{
            'circle-color': '#0991dd',
            'circle-radius': {
              property: 'point_count',
              type: 'interval',
              stops: [
                [0, 20],
                [100, 30],
                [750, 40]
              ]
            }
          }}
        />
        <Layer
          id="unclustered_layer"
          type="circle"
          sourceId="source_id"
          paint={{
            'circle-color': '#3fff80',
            'circle-radius': 18
          }}
          filter={ ['!has', 'point_count'] }
      />
        <Layer
          id="text_layer"
          type="symbol"
          sourceId="source_id"
          layout={{
            'text-field': '{point_count}',
            'text-size': 12
          }}
          filter={ ['has', 'point_count'] }
        />       
      </Map>
    );
  }
}

export default App;

＆＃13;

＆＃13;

＆＃13;

WebpackBin showing this issue

任何帮助都将不胜感激。

更新

我能够以cluster_id的方式对supercluster进行编码并获取群集项目。

const cluster_id = (id << 5) + (zoom + 1);

由于