如何在本机反应中使用mapbox标记簇？

Question

我正在使用react-native-mapbox-gl。我要遍历一系列位置以在地图上绘制标记。但是有些位置彼此非常接近，几乎看不见。我想将彼此靠近的所有位置聚类，以便在单击它时将其展开并向我显示该聚类中的所有位置。

[mapbox中有<MapboxGL.ShapeSource />，但它要求从中加载经纬度的URL。但是我有一个数组，每个位置的时间都长。还有什么其他方法可以在mapbox中建立位置集群。

<Mapbox.MapView
 styleURL={Mapbox.StyleURL.Dark}
 zoomLevel={15}
 centerCoordinate={[locations[0].longitude, locations[0].latitude]}
 style={styles.container}
 showUserLocation={true}>

 {this.renderLocations(locations)}

</Mapbox.MapView>

渲染位置功能在位置数组中循环并在地图上显示标记

renderLocations(locations) {
 return locations.map((loc, locIndex) => {
  return (
    <Mapbox.PointAnnotation
      key={`${locIndex}pointAnnotation`}
      id={`${locIndex}pointAnnotation`}
      coordinate={[loc.longitude, loc.latitude]}
      title={loc.name}>
      <Image source={require("../../../assets/images/marker.png")}/>
      <Mapbox.Callout title={loc.name} />
    </Mapbox.PointAnnotation>
  );
});

Answer 1

您可以这样使用@ turf / clusterDbScan：