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

/**
 * 首页地图组件-使用ClusteringMapView和VbeClusterMap
 * @邠心vbe on 2021/03/18
 */
import React, { useEffect, useRef } from 'react';
import { StyleSheet } from 'react-native';
import { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from 'react-native-maps';
import MapView from "@allisonadam81/react-native-super-clusters";
import { MyCluster, MyMarker } from './Cluster';
import VbeClusterMap from 'vbe-cluster-map';

export default Maps3 = ({ region, onMapReady, stopList, useApplesMap=false, showUserLocation=true, onMarkerPress }) => {
  const mapRef = useRef();
  const superClusterRef = useRef();

  useEffect(() => {
    if (isIOS) {
      //mapRef.current.animateToRegion(region, 500);
      mapRef.current.animateCamera({ center: region, zoom: 17 }, { duration: 500 });
      //mapRef.current.animateCamera({ center: region, zoom: 17 }, 500); //移动地图到当前位置并放大
    } else {
      if (mapRef.current?.moveCamera) {
        mapRef.current.moveCamera(region, 17);
        //mapRef.current.showUserLocation();
      }
    }
  }, [region])

  /*componentDidMount() {
    this.mapRef = this.ref.current.mapRef ? this.ref.current.mapRef : this.ref.current;
  }*/

  const renderCluster = (props) => {
    //console.log("renderCluster", props);
    let hasAvailableConnector = false;
    if (props.geometry.hasAvailableConnector === undefined) {
      if (superClusterRef) {
        const points = superClusterRef.current.getLeaves(props.id, Infinity, 0);
        if (points) {
          for (let index = 0; index < points.length; index++) {
            const point = points[index];
            if (point.properties.coordinate?.available) {
              hasAvailableConnector = true;
              break;
            }
          }
        }
      }
    } else {
      hasAvailableConnector = props.geometry.hasAvailableConnector
    }
    props.geometry.hasAvailableConnector = hasAvailableConnector;
    const latlng = {latitude: props.geometry.coordinates[1], longitude: props.geometry.coordinates[0]}
    //InteractionManager.runAfterInteractions();
    return (
      <MyCluster
        {...props}
        key={props.id}
        location={latlng}
        available={hasAvailableConnector}
        onOpen={(latlng, id) => openClusterMarker(latlng, id)}/>
    );
  }

  const openClusterMarker = async (latlng, clusterId) => {
    var camera = await mapRef.current.getCamera();
    camera.center = latlng;
    const currentZoom = camera.zoom;
    if (currentZoom >= 12) {
      openClusterMarker2(clusterId);
      return;
    }
    let targetZoom = Math.max(currentZoom, 10);
    let increment = 2 - (targetZoom - 10) * 0.2;
    targetZoom += increment;
    camera.zoom = targetZoom;
    console.log('camera', camera);
    mapRef.current.animateCamera(camera, 300);
  }

  const openClusterMarker2 = async (clusterId) => {
    console.log('openClusterMarker2-start', clusterId);
    try {
      const clusterChildren = await superClusterRef.current.getLeaves(clusterId, Infinity, 0); 
      console.log('openClusterMarker2-child', clusterChildren);
      const coordinates = clusterChildren.map(m => ({
        latitude: m.geometry.coordinates[1],
        longitude: m.geometry.coordinates[0]
      }));
      const padding = { top: 50, right: 50, bottom: 50, left: 50 };
      console.log('openClusterMarker2-end', coordinates);
      // 放弃手动计算 zoom，让地图自动“框”住这些点
      mapRef.current.fitToCoordinates(coordinates, {
        edgePadding: padding,
        animated: true,
      });
    } catch (e) {
      console.log("openClusterMarker2-err", e)
    }
  }

  return (
    isIOS
    ? <MapView
        ref={mapRef}
        superClusterRef={superClusterRef}
        style={StyleSheet.absoluteFillObject}
        minZoom={5}
        maxZoom={20}
        radius={$vw(12)}
        extent={512}
        nodeSize={64}
        edgePadding={{top:20, left: 20, right: 20, bottom: 20}}
        preserveClusterPressBehavior={false}
        animationEnabled={true}
        showsIndoors={false}
        showsTraffic={false}
        toolbarEnabled={false}
        initialRegion={region}
        tintColor={colorAccent}
        onMapReady={onMapReady}
        poiClickEnabled={false}
        zoomControlEnabled={false}
        tracksViewChanges={true}
        showsMyLocationButton={false}
        showsIndoorLevelPicker={false}
        showsUserLocation={showUserLocation}
        followsUserLocation={showUserLocation}
        renderCluster={info => renderCluster(info)}
        provider={useApplesMap ? PROVIDER_DEFAULT : PROVIDER_GOOGLE}>
      { stopList.map((marker, index) => {
        return (
          <MyMarker
            key={index}
            id={marker.id}
            coordinate={marker}
            onPress={() => onMarkerPress(marker.id)}
          />
        );
      })}
    </MapView>
  : <VbeClusterMap
      ref={mapRef}
      style={StyleSheet.absoluteFill}
      region={region}
      data={stopList}
      animation={true}
      showCompass={false}
      showTraffic={false}
      showIndoors={false}
      showIndoorLevelPicker={false}
      onMapReady={onMapReady}
      onMarkerPress={e => onMarkerPress(e.id)}
      showUserLocation={showUserLocation}
      moveOnMarkerPress={true}
    />
  );
}