react-native - 如何在 React Native 中使用 mapbox 标记集群？

Question

我正在使用 react-native-mapbox-gl。我有一组位置，我正在遍历这些位置以在 map 上绘制标记。但有些位置彼此非常接近，几乎看不见。我想将所有彼此靠近的位置聚类在一起，这样当我单击它时，它会展开并向我显示该聚类中的所有位置。

有<MapboxGL.ShapeSource />在 mapbox 中可用，但它要求提供一个从中加载经纬度的 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>

渲染位置函数循环遍历位置数组并在 map 上显示标记

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:

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) });