问React Native Mapbox自定义群集饼图

EN

const mapStyles = {
  icon: {
    iconImage: ['get', 'icon'],

    iconSize: [
      'match',
      ['get', 'icon'],
      'park', 0.9,
      'parkLarge', 1.6,
      'school', 0.9,
      'schoolLarge', 1.6,
      1, /* default */
    ],

    iconAllowOverlap: true
  },
  clusteredPoints: {
    circlePitchAlignment: 'map',

    circleColor: [
      'step',
      ['get', 'point_count'],
      '#2A2E43',
      100,
      '#2A2E43',
      750,
      '#2A2E43',
    ],

    circleRadius: ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],

    circleOpacity: 1,
    circleStrokeWidth: 4,
    circleStrokeColor: 'white',
  },

  clusterCount: {
    textColor: 'white',
    textField: '{point_count}',
    textSize: 12,
    textPitchAlignment: 'map',
  },
};

<MapboxGL.MapView
          ref={ref => (this.map = ref)}
          style={{ flex: 1, zIndex: 100 }}
          styleURL="mapbox://[hidden]"
          onPress={() => this.props.onPressMap()}
          onRegionDidChange={(region) => this.onRegionDidChange(region)}
          onRegionWillChange={() => this.props.onRegionWillChange()}
          pitchEnabled={false}
          rotateEnabled={false}
          localizeLabels={true}
        >
          <MapboxGL.UserLocation visible={true} />
          <MapboxGL.Camera
            ref={(c) => this.camera = c}
            zoomLevel={this.props.zoomLevel}
            centerCoordinate={this.props.location}
            animationMode={'flyTo'}
            animationDuration={200}
            style={{ paddingBottom: 300 }}
          />
          <MapboxGL.Images images={{ park: parkIcon, parkLarge: parkIcon, school: schoolIcon, schoolLarge: schoolIcon }} />

          {
            this.props.featureCollection && this.props.featureCollection.features && this.props.featureCollection.features.length > 0 ? (
              <View>
                <MapboxGL.ShapeSource
                  id="pointsSource"
                  shape={this.props.featureCollection}
                  onPress={(event) => this.props.onPressMarker(event)}
                  cluster
                  clusterRadius={80}
                  clusterMaxZoomLevel={14}
                >
                  <MapboxGL.SymbolLayer
                    id="pointCount"
                    style={mapStyles.clusterCount}
                  />

                  <MapboxGL.CircleLayer
                    id="clusteredPoints"
                    belowLayerID="pointCount"
                    filter={['has', 'point_count']}
                    // filter={['>', 'point_count', 1]}
                    style={mapStyles.clusteredPoints}
                  />

                  <MapboxGL.SymbolLayer
                    id="favoritesIcons"
                    filter={['!', ['has', 'point_count']]}
                    // filter={['==', 'point_count', 1]}
                    style={mapStyles.icon}
                  />
                </MapboxGL.ShapeSource>
              </View>
            ) : null
          }

        </MapboxGL.MapView>