3

私はreact-native-mapbox-glで作業しています。マップ上にマーカーを描画するためにループしている場所の配列があります。しかし、互いに非常に近く、ほとんど見えない場所がいくつかあります。互いに近くにあるすべての場所をクラスター化して、クリックすると展開され、そのクラスターに含まれるすべての場所が表示されるようにします。

<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>

位置をレンダリングする関数は、位置配列をループし、地図上にマーカーを表示します

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

1 に答える 1