如何在React Native中使用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>
  );
});

- Banti Ram

Answer 1

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

let collection = MapboxGL.geoUtils.makeFeatureCollection();

results.forEach(result => {
  const geometry = {
    type: "Point",
    coordinates: [result.lon, result.lat]
  };
  let marker = MapboxGL.geoUtils.makeFeature(geometry);
  marker.id = result.id
  marker.properties = {
    ...yourProperties
  };
  collection = MapboxGL.geoUtils.addToFeatureCollection(collection, marker);
});

// Let Turf do the job !
const maxDistance = 0.005;
const clustered = turf.clustersDbscan(collection, maxDistance);

// Markers have no cluster property
const markers = clustered.features
  .filter( f => f.properties.cluster===undefined)
  .map(f => {
    return {...f.properties, coordinates: f.geometry.coordinates}
  })

// Clusters have one (cluster id)
let clusters = {};
clustered.features
  .filter( f => f.properties.cluster!==undefined)
  .forEach( f => {
    const { cluster, id} = f.properties;
    const { coordinates } = f.geometry;
    if (!clusters[cluster]) {
      clusters[cluster] = {
        id: `cluster_${cluster}`,
        count: 1,
        objects: [id],
        coordinates: coordinates
      }
      console.tron.log({clusters})
    }
    else {
      const { count } = clusters[cluster]
      const [lastX, lastY] = clusters[cluster].coordinates;
      const [x, y] = coordinates;
      const newX = ((lastX * count) + x) / (count+1);
      const newY = ((lastY * count) + y) / (count+1);
      clusters[cluster] = {
        ...clusters[cluster],
        count: count+1,
        objects: [...clusters[cluster].objects, id],
        coordinates: [newX, newY]
      }
    }
  })

this.setState({ markers, clusters: _.values(clusters) });

- Fabrice Fontaine