Я реализовал react-native-mapbox-gl
в моем проекте.Я хочу сделать пользовательские маркеры с изображениями, поступающими с сервера, я видел примеры с определением объекта таблицы стилей MapBox, но я не могу сделать это динамически, когда есть массив маркеров и изображений.Ниже приведен фрагмент кода, показывающий, как это делается с одним изображением, но я хочу сделать это с массивом маркеров и изображений.Любая помощь будет оценена.
const layerStyles = MapboxGL.StyleSheet.create({
icon: {
iconAllowOverlap: true,
iconIgnorePlacement: true,
iconSize: Platform.OS === 'android' ? 1 : 0.5,
iconOffset: [0, 5],
textField: '{discountPercentage}%',
textSize: 14,
},
iconPremium: {
iconImage: markerPremium,
textColor: '#fff',
textHaloColor: '#fff',
textHaloWidth: 0.3,
},
iconPremiumSelected: {
iconImage: markerPremiumSelected,
textColor: '#D7B218',
textHaloColor: '#D7B218',
textHaloWidth: 0.1,
},
});
<MapboxGL.ShapeSource
id="premiumOffers"
shape={{
type: 'FeatureCollection',
features: this.state.markers,
}}
cluster
clusterMaxZoomLevel={14}
clusterRadius={50}
onPress={(e) => {
const { offerId, restaurantId } = e.nativeEvent.payload.properties;
if (offerId) this.props.selectMarker(offerId, restaurantId);
}}
>
<MapboxGL.SymbolLayer
id="singlePoint"
filter={['all', ['!has', 'point_count'], ['==', 'isSelected', false]]}
style={[layerStyles.icon, layerStyles.iconPremium]}
/>
</MapboxGL.ShapeSource>