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

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


export const MyMarker = ({id, coordinate, onPress}) => {
  const [tracksViewChanges, setTracksViewChanges] = useState(true);

  const onImageLoad = () => {
    // 图片加载完成后关闭 tracksViewChanges 以提升性能
    setTimeout(() => setTracksViewChanges(false), 100);
  };

  if (coordinate.upcoming) {
    return (
      <Marker
        key={id}
        zIndex={20}
        coordinate={coordinate}
        tracksViewChanges={tracksViewChanges}
        onPress={onPress}>
        <Image
          style={styles.marker}
          onLoad={onImageLoad}
          source={require('../../../images/maps/ic_marker_upcoming.png')}/>
      </Marker>
    )
  } else {
    return (
      <Marker
        key={id}
        zIndex={20}
        coordinate={coordinate}
        tracksViewChanges={tracksViewChanges}
        onPress={onPress}
        style={ui.center}>
        { coordinate.hasLabel &&
          <Image
            style={styles.markerTop}
            source={require('../../../images/maps/ic_marker_additional.png')}/>
        }
        { coordinate.favorite
          ? coordinate.available
            ? <Image
                style={styles.marker}
                onLoad={onImageLoad}
                source={require('../../../images/maps/ic_marker_star.png')}/>
            : <Image
                style={styles.marker}
                onLoad={onImageLoad}
                source={require('../../../images/maps/ic_marker_unstar.png')}/>
          : coordinate.available
            ? <Image
                style={styles.marker}
                onLoad={onImageLoad}
                source={require('../../../images/maps/ic_marker.png')}/>
            : <Image
                style={styles.marker}
                onLoad={onImageLoad}
                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
  const [tracksViewChanges, setTracksViewChanges] = useState(true);
  //console.log('renderCluster', props);

  return (
    <Marker
      key={id}
      coordinate={location}
      zIndex={20}
      tracksViewChanges={tracksViewChanges}
      onPress={() => onOpen ? onOpen(location, id) : onPress()}>
      <ClusterView 
        pointCount={pointCount} 
        available={available}
        onLoad={() => setTimeout(() => setTracksViewChanges(false), 100)}
      />
    </Marker>
  );
}

export const ClusterView = ({pointCount, available=false, onLoad}) => {
  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)}
      onLoad={onLoad}
      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: 48,
    height: 48
  },
  markerTop: {
    width: 24,
    height: 24,
    marginBottom: -2
  },
  small: {
    width: 48,
    height: 48
  },
  middle: {
    width: 50,
    height: 50
  },
  large: {
    width: 52,
    height: 52
  },
  textAvailable: {
    color: textLight,
    fontSize: 18,
    fontWeight: 'bold',
    paddingBottom: 10
  },
  textUnavailable: {
    color: '#999',
    fontSize: 18,
    fontWeight: 'bold',
    paddingBottom: 10
  }
})