时间戳

首页 > 解决方案 > React Native Mapbox 自定义集群饼图

react-native - React Native Mapbox 自定义集群饼图

问题描述

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

我已经能够使用 react-native-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>

标签： react-nativemapsmapboxpie-chartmarkerclusterer

解决方案

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

在 React Native 实现中也可能需要一种类似的方法（手动将集群源与标记对象池同步，这些标记对象在地图视图更改时不断更新，而不是使用 Mapbox GL层来显示集群）。

推荐阅读