ChargEco/Strides-APP/app/pages/home/maps/Cluster.js

/**
 * 地图聚合组件
 * @邠心vbe on 2021/08/13
 */
import React from 'react';
import { Image, ImageBackground, StyleSheet, Text } from 'react-native';
import { Marker } from 'react-native-maps';


export const MyMarker = ({id, coordinate, onPress}) => {
  return (
    <Marker
      key={id}
      zIndex={1}
      coordinate={coordinate}
      onPress={onPress}>
      { coordinate.hasLabel &&
        <Image
          style={styles.markerTop}
          source={require('../../../images/maps/ic_marker_additional.png')}/>
      }
      { coordinate.favorite
        ? coordinate.available
          ? <Image
              style={styles.marker}
              source={require('../../../images/maps/ic_marker_star.png')}/>
          : <Image
              style={styles.marker}
              source={require('../../../images/maps/ic_marker_unstar.png')}/>
        : coordinate.available
          ? <Image
              style={styles.marker}
              source={require('../../../images/maps/ic_marker.png')}/>
          : <Image
              style={styles.marker}
              source={require('../../../images/maps/ic_marker_un.png')}/>
      }
    </Marker>
  )
}

export const MyCluster = (props) => {
  const {id, location, properties, onPress, available=false, onOpen} = props;
  const pointCount = props.pointCount ? props.pointCount : properties.point_count
  //console.log('renderCluster', props);

  return (
    <Marker
      key={id}
      style={{ zIndex: pointCount + 1 }}
      coordinate={location}
      zIndex={pointCount + 1}
      onPress={() => onOpen ? onOpen(location) : onPress()}>
      <ClusterView pointCount={pointCount} available={available}/>
    </Marker>
  );
}

export const ClusterView = ({pointCount, available=false}) => {
  const getStyle = (count) => {
    if (count >= 100) {
      return [ui.flexcc, styles.large];
    } else if (count >= 10) {
      return [ui.flexcc, styles.middle];
    } else {
      return [ui.flexcc, styles.small];
    }
  }
  return (
    <ImageBackground
      style={getStyle(pointCount)}
      source={available
      ? require('../../../images/maps/ic_cluster.png')
      : require('../../../images/maps/ic_cluster_un.png')}
    >
      <Text style={available ? styles.textAvailable : styles.textUnavailable}>{pointCount}</Text>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  marker: {
    width: 29.52,
    height: 34.28
  },
  markerTop: {
    width: 29.52,
    height: 34.28
  },
  small: {
    width: 29.52,
    height: 34.28
  },
  middle: {
    width: 31,
    height: 36
  },
  large: {
    width: 34.1,
    height: 39.6
  },
  textAvailable: {
    color: textLight,
    fontSize: 16,
    paddingBottom: 7
  },
  textUnavailable: {
    color: '#999',
    fontSize: 16,
    paddingBottom: 7
  }
})