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