react-native - 如何使用 React Native Mapbox 从集群中获取叶子？

Question

目前我正在做一个需要我使用 react-native 的项目。考虑到 Mapbox Android SDK 中的处理方式，我面临的问题似乎很简单。情况如下:

我正在展示一张全屏 map ，其中包含一些用于缩放和以用户位置为中心的按钮。在这张 map 上有几个“兴趣点”。目前，我正在使用 ShapeSource 对数据进行聚类，对单个数据使用 SymbolLayer，对聚类的“兴趣点”使用 SymbolLayer。

我想要实现的是获得对我正在单击的集群之一的所有叶子的访问权。在 Android SDK 中，这可以使用以下代码实现:

 String[] layers = new String[] {"cluster-route-0", "cluster-route-1", "cluster-route-2", "cluster-route-3", "cluster-route-4"};


 features = mMapboxMap.queryRenderedFeatures(pixel, layers);
 GeoJsonSource source = mMapboxMap.getStyle().getSourceAs(ROUTE_SOURCE_ID);

然后我会遍历所有特征并像这样得到簇叶

for (Feature feature : features) {
   FeatureCollection collection = source.getClusterLeaves(feature, 100,0);
}

然后集合变量将是一个 FeatureCollection，其中包含集群中包含的所有特征或叶子。

浏览 documentation我在 React Native Mapbox 变体中找不到类似的东西。所以我想知道这里是否有人能够找到解决方案。或者我可能忽略了示例或文档中的某些内容。

Answer 1

最近，我能够更深入地了解上述问题，并实际上得出了一个足以满足我的用例的解决方案。有几种可能的解决方案来克服这个问题。

1) 结合 Mapbox 使用另一个集群解决方案，例如 Supercluster

2) fork Mapbox repro 并添加一个方法，从原生 SDK 调用 getClusterLeaves() 方法

解决方案一

第一个解决方案使用 Supercluster npm 包，这个解决方案完全基于在 this page 上找到的信息.我将分享我最终得到的代码，但要了解更多信息，我想鼓励您阅读链接的资源。

//Initialize supercluster, these values worked great for me
const cluster = new Supercluster({ radius: 40, maxZoom: 16 });
cluster.load(collection.features);

Supercluster 的load 方法中使用的collection 变量应该代表一个FeatureCollection 值。您可以通过多种方式创建。对我来说效果很好的是下面的那个。

const collection = MapboxGL.geoUtils.makeFeatureCollection(groupFeatures);

groupFeatures 变量可以是由要在 map 上显示的要素组成的数组。为了便于访问，我在继续之前将集群变量存储在我的状态中。我喜欢把事情分开，这样我就很容易看出代码的哪一部分负责什么。所以我的 Render 方法如下所示。

<MapboxGL.MapView
  ref={c => (this._map = c)}
  onRegionDidChange={this.updateClusters}
  zoomEnabled
  style={[{ flex: 1 }]}>

 //This is where we render the clusters
 {this.renderPoints()}

</MapboxGL.MapView>

下一步是使用 supercluster 获取实际的集群，为此我们需要我们正在显示的 map 的边界和当前的缩放级别(使用 Math.round，因为十进制值可能会导致 supercluster 内的错误) .

const bounds = await this._map.getVisibleBounds();
const zoom = Math.round(await this._map.getZoom());
const westLng = bounds[1][0];
const southLat = bounds[1][1];
const eastLng = bounds[0][0];
const northLat = bounds[0][1];

现在我们可以检索实际的集群来做这样的事情:

const sc = this.state.superCluster;
const clusters = sc.getClusters(
    [westLng, southLat, eastLng, northLat],
    zoom
)
this.setState({clusters: clusters})

现在我们可以在 Mapbox Shapesource 中渲染集群了

renderPoints = () => {
  const { clusters } = this.state;
  return (
   <MapboxGL.ShapeSource
     id="symbolLocationSource"
     hitbox={{ width: 18, height: 18 }}
     onPress={this.onMarkerSelected}
     shape={{ type: "FeatureCollection", features: superClusterClusters }}
    >
    <MapboxGL.SymbolLayer
     id="pointCount"
     minZoomLevel={6}
     style={mapStyles.clusterCount}
    />

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

    <MapboxGL.SymbolLayer
     id="symbolLocationSymbols"
     minZoomLevel={6}
     filter={["!", ["has", "point_count"]]}
     style={mapStyles.icon}
    />
   </MapboxGL.ShapeSource>
 );
}

现在对于拼图的最后一 block ，我们能够获得簇的实际叶子。在上面代码的最后一部分，我已经为 onPress 添加了 onMarkerPressed 方法。这是我们获得集群的叶子。

onMarkerSelected = event => {
  const point = event.nativeEvent.payload;
  const { name, cluster } = point.properties;

  if (cluster) {
    const sc = this.state.superCluster;
    const points = sc
      .getLeaves(point.properties.cluster_id, Infinity)
    //This will output an array with all leaves of the selected cluster
    console.log(points);
  }
}

方案二

所以上面提到的解决方案是我根据自己的情况选择的解决方案。所以我没有探索 fork Mapbox repro 并向其添加功能的解决方案。然而，我发现了一些让你开始关注 link here 的建议。和 here