如何使用自定义图标在React Native Mapbox中执行群集。
我已经检查了mapbox的GitHub页面上给出的地震聚类示例。但我需要一些不同的东西，我需要用自定义图标进行聚类。我在地图上有两种类型的数据/点，一种是用户，另一种是具有不同图标的事件，所以我需要在聚类中渲染这些自定义图标。
也点击该图标我需要在该图标后面显示脉冲动画。有可能这样做吗？
这是我实现mapbox的代码： -
<MapboxGL.MapView
ref={(ref) => this.map = ref}
showUserLocation={store.homeStore.locationAlowed}
zoomLevel={11}
pitch={45}
centerCoordinate={[store.userStore.longitude, store.userStore.latitude]}
userTrackingMode={MapboxGL.UserTrackingModes.follow}
styleURL={MapboxGL.StyleURL.Street}
style={{
position: store.homeStore.mapPosition,
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
logoEnabled={false}
compassEnabled={false}
attributionEnabled={false}
onDidFinishRenderingMapFully={() => this.map.takeSnap(true).then((resp) => {
if (resp) {
store.homeStore.mapImageSource = resp;
}
})}
onPress={this.onMapPress.bind(this)}>
{store.homeStore.setLocationOnMap && store.homeStore.eventData.length > 0 ?
store.homeStore.eventData.map((prop, key) => {
return (
<MapboxGL.PointAnnotation
key={prop.id}
id={prop.id}
coordinate={[parseFloat(prop.evt_longitude), parseFloat(prop.evt_latitude)]} >
<TouchableOpacity onPress={this.selectEventOnMap.bind(this, prop)} style={{ height: vh * 0.109 }}>
<View style={styles.likesContainer}>
<Image source={require('../Images/ic_home_event_likes.png')}
style={[styles.heartImage, prop.event_likes > 999 ? { marginLeft: vw * 0.018 } :
prop.event_likes > 9 ? { marginLeft: vw * 0.036 } : { marginLeft: vw * 0.049 }]} />
<Text style={[styles.likesText, prop.event_likes < 10 ? { marginLeft: 2 } : '']}>
{prop.event_likes > 999 ? (Math.round(prop.event_likes / 1000) + " k") : prop.event_likes}</Text>
</View>
<Image source={require('../Images/ic_home_inactive_event_pin.png')}
style={{
height: vh * 0.098, width: vw * 0.15, marginTop: vh * 0.017,
tintColor: (prop.userid == store.userStore.id ? Colors.Blue : Colors.warmPink)
}} />
<Image source={this.getImageSource(prop.evt_category)}
style={{
height: vh * 0.041, width: vw * 0.077,
top: vh * 0.035, left: vw * 0.038, position: 'absolute'
}} />
{prop.selected && <Pulse style={{ zIndex: -1, position: 'absolute', top: -((vh * 0.109) / 3) }}
color={Colors.warmPink} numPulses={6} diameter={100} speed={18} duration={1000} />}
</TouchableOpacity>
</MapboxGL.PointAnnotation>
);
}) : null}
{store.homeStore.setLocationOnMap && store.homeStore.peopleData.length > 0 ?
store.homeStore.peopleData.map((prop, key) => {
return (
<MapboxGL.PointAnnotation
key={prop.userid}
id={prop.userid}
coordinate={[parseFloat(prop.longitude), parseFloat(prop.latitude)]} >
<TouchableOpacity onPress={() => { store.homeStore.showProfileCard = true; store.homeStore.userData = prop; }}>
<View style={{
height: vw * 0.130, width: vw * 0.130, borderRadius: (vw * 0.130) / 2,
backgroundColor: Colors.Blue, alignItems: 'center', justifyContent: 'center'
}}>
<AsyncImage source={{ uri: prop.image }}
style={{
height: vw * 0.122, width: vw * 0.122, borderRadius: (vw * 0.122) / 2
}} placeholderColor='#b3e5fc' />
</View>
</TouchableOpacity>
</MapboxGL.PointAnnotation>
);
}) : null}
{this.renderRoute()}
{/* <MapboxGL.ShapeSource
id='earthquakes'
cluster
clusterRadius={50}
clusterMaxZoom={14}
url='http://moso.appinventive.com/public/accesscsv/data.json'>
<MapboxGL.SymbolLayer
id='pointCount'
style={layerStyles.clusterCount} />
<MapboxGL.CircleLayer
id='singlePoint'
filter={['!has', 'point_count']}
style={layerStyles.singlePoint} />
</MapboxGL.ShapeSource> */}
{/* <MapboxGL.ShapeSource
id='talesMarkers'
shape={jsonData}
cluster
clusterRadius={50}
clusterMaxZoom={14}
>
<MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon} />
</MapboxGL.ShapeSource> */}
</MapboxGL.MapView>
这里是json数据： -
const jsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "27",
"evt_name": "nh24 event",
"evt_latitude": "28.624134137261",
"evt_longitude": "77.399671500871",
"evt_start": "1520855452",
"evt_category": "1",
"event_address": "Pusta Road, Bahrampur, Noida, Uttar Pradesh 203207, India",
"evt_createdon": "1520855452",
"userid": "23",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
"event_likes": "0",
"event_followers": "0",
"distance": "2.6069925023499723",
"view": false,
"event_growth": 0,
"owner_popularity": 0,
"viral": 0,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.399671500871,
28.624134137261,
6.55
]
},
"id": "27"
},
{
"type": "Feature",
"properties": {
"id": "26",
"evt_name": "event with exact address",
"evt_latitude": "28.611121352303",
"evt_longitude": "77.385811577333",
"evt_start": "1520839916",
"evt_category": "1",
"event_address": "Sector 65, Noida, Uttar Pradesh 201301, India",
"evt_createdon": "1520839916",
"userid": "23",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
"event_likes": "0",
"event_followers": "0",
"distance": "1.489932977056515",
"view": false,
"event_growth": 0,
"owner_popularity": 0,
"viral": 0,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.385811577333,
28.611121352303,
1.67
]
},
"id": "26"
},
{
"type": "Feature",
"properties": {
"userid": "13",
"name": "",
"username": "howdy",
"latitude": 28.577006492753625,
"longitude": 77.32924537095796,
"facebookprof": "",
"instaprof": "",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FchMzFARwXj2z1y3MYASk",
"createdon": "1519757532",
"user_bio": "",
"user_likes": "1",
"user_followers": "1",
"distance": "0.021139920338468652",
"liked": false,
"follows": false,
"view": false,
"live_events": "0",
"user_growth": 1.3149888133309905e-9,
"user_popularity": 0.00046882325363338024,
"viral": 1.1720601065666707e-8,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.32924537095796,
28.577006492753625,
77.7
]
},
"id": "13"
},
{
"type": "Feature",
"properties": {
"userid": "20",
"name": null,
"username": "otheruser",
"latitude": 28.606038365831,
"longitude": 77.362243836846,
"facebookprof": "",
"instaprof": "",
"image": "https://scontent.xx.fbcdn.net/v/t1.0-1/c59.0.200.200/p200x200/10354686_10150004552801856_220367501106153455_n.jpg?oh=f621f9474a63f5b27b0514adda5db42b&oe=5B0F8625",
"createdon": "1519776475",
"user_bio": "",
"user_likes": "1",
"user_followers": "1",
"distance": "0.019360181909683884",
"liked": false,
"follows": false,
"view": false,
"live_events": "0",
"user_growth": 1.3149888133309905e-9,
"user_popularity": 0.0000017414245723714283,
"viral": 4.35553391414857e-11,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.362243836846,
28.606038365831,
1.6
]
},
"id": "20"
},
{
"type": "Feature",
"properties": {
"userid": "23",
"name": "vijay",
"username": "vijaysharma",
"latitude": 28.577006492753625,
"longitude": 77.32924537095796,
"facebookprof": "https://www.gmail.com",
"instaprof": "https://www.gmail.com",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
"createdon": "1520588433",
"user_bio": "Usheiwhwosbwowgwiwgwowwjai9a7292ue8rgdidbdidhndjdjdjdjsksoa9wub3829283yehs8dyv3i38sieh3i39w83hejwuhe",
"user_likes": "0",
"user_followers": "0",
"distance": "0.021139920338468652",
"liked": false,
"follows": false,
"view": false,
"live_events": "0",
"user_growth": 0,
"user_popularity": 0,
"viral": 0,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.32924537095796,
28.577006492753625,
44.5
]
},
"id": "23"
}
]
}
使用pointAnnotations我可以在地图上显示点，但这种方式聚类不在mapbox上执行。如果我尝试使用shapesource图层和json数据在聚类上制作点，那么我就不知道如何使用我的自定义图标了。我还需要点击该自定义引脚点击事件并在该点后面显示脉冲加载动画。
请查看屏幕截图以及我需要对群集进行的操作。 屏幕截图仅显示了没有发生聚类的点注释。
