1

我正在使用@react-native-mapbox-gl/maps，我想为标记实现聚类。我无法为我的实施找到任何解决方案。附加图像将显示应该组合两个标记，但它们不是。

在此处输入图像描述

下面我粘贴我的代码：

<MapboxGL.MapView
      showUserLocatin={true}
      zoomLevel={10}
      zoomEnabled={zoomEnabled}
      pitchEnabled={true}
      onPress={onMapPress}
      onRegionIsChanging={onRegionIsChanging}
      surfaceView={true}
      rotateEnabled={rotateEnabled}
      compassEnabled={false}
      showUserLocation={false}
      userTrackingMode={MapboxGL.UserTrackingModes.None}
      scrollEnabled={scrollEnabled}
      styleURL={styleURL}
      centerCoordinate={getFocusPoint() || getStartingPoint()}
      ref={(c) => (_map = c)}
      onRegionDidChange={onRegionChange}
      style={style}
      cluster
    >
      {renderLines()}
      <MapboxGL.SymbolLayer
        id={'abc'}
        sourceID={MapboxGL.StyleSource.DefaultSourceID}
      />
      <MapboxGL.Camera
        zoomLevel={zoom}
        centerCoordinate={getFocusPoint() || getStartingPoint()}
      />
      {(simplePlaceData?.length > 0 || places?.length > 0) && renderMarkers()}
    </MapboxGL.MapView>

下面是我们的 renderMarkers 函数（基本上我在 MapboxGL.PointAnnotation 中显示任何 RN 组件，如图像/图标）：

const renderMarkers = () => {
    if (simplePlaceData)
      return simplePlaceData?.map((_place) => {
        const {lat, lng, id} = _place
        const latVal = parseFloat(lat)
        const lngVal = parseFloat(lng)
        if (!lat || !lng || isNaN(latVal) || isNaN(lngVal)) return null

                return (
                    <MapboxGL.PointAnnotation
                        key={`${id}`}
                        id={`${id}`}
                        title={`${lat}-${lng}`}
                        coordinate={[parseFloat(lng), parseFloat(lat)]}>
                     <Col style={styles.mapMarkers}>
              <Icon
                name={'map-marker'}
                family={'materialCommunity'}
                color={Colors.linkBlue}
                size={31}
              />
            </Col>
                    </MapboxGL.PointAnnotation>
                )
            })
        else
            return places?.length > 0 &&  places.map(_place => {
                const {lat, lng, id, image, name} = _place.trip_place.place
                const isSelected = (getFocusPoint() || getStartingPoint())?.first() == lng &&
                    (getFocusPoint() || getStartingPoint())?.last() == lat
                if (Platform.OS === 'ios') {
                    return (
                        <MapboxGL.PointAnnotation
                            key={`${id}`}
                            id={`${id}`}
                            title={name}
                            coordinate={[parseFloat(lng), parseFloat(lat)]}
                        >
                            <MapMarker
                                image={{uri: image}}
                                imageSize={isSelected ? 41 : 31}
                                style={isSelected ? styles.mapMarkersSelected : styles.mapMarkers}
                                onPress={() => selectPlace(_place.trip_place.place, true)}
                            />
                        </MapboxGL.PointAnnotation>
                    )
                } else {
                    return (
                        <MapboxGL.MarkerView
                            id={`${id}`}
                            key={`${id}`}
                            coordinate={[parseFloat(lng), parseFloat(lat)]}
                            title={name}
                        >
                            <View style={isSelected ? styles.mapMarkerContainerSelected : styles.mapMarkerContainer}>
                                <MapMarker
                                    image={{uri: image}}
                                    imageSize={isSelected ? 41 : 31}
                                    style={isSelected ? styles.mapMarkersSelected : styles.mapMarkers}
                                    onPress={() => selectPlace(_place.trip_place.place, true)}
                                />
                            </View>
                        </MapboxGL.MarkerView>
                    )
                }
            })
    }

是否有任何解决方案可以申请 MapboxGL.PointAnnotation 将标记显示为包含内部项目数量的组合集群？或者我可以使用 MapboxGL 的另一个组件来实现此功能？

谢谢

4

0 回答 0