React Native Mapbox自定义群集饼图

Question

我正在使用包react-native-mapbox-gl / maps生成具有聚类的地图。我需要能够分析每个群集，并根据其内容生成一个饼图，该饼图表示群集中不同点的类型。考虑到不同类型的“层”和“源”，这是不可能的，或者我无法弄清楚。老实说，我什至不知道从哪里开始。非常感谢任何帮助或指出正确的方向！

我已经能够使用react-native-maps包（Google Maps）创建地图，并具有自定义群集，但是我发现Mapbox包的内存使用情况要好得多。

关于如何生成地图没有什么特别的，但是代码如下：

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>

Answer 1

尽管我们文档中的相关示例是使用Mapbox GL JS而不是React Native构建的，但您可能会发现此display HTML clusters with custom properties示例是一个很好的起点。它演示了如何使用expressions为每个群集创建类似饼图的SVG，具体取决于特定群集中数据的属性。

在React Native实现中，有必要采用类似的方法（手动将集群源与标记对象池同步，该标记对象池在地图视图更改时不断更新，而不是使用Mapbox GL layer来显示集群），因为好。