add app/pages/home/maps/Maps.js

Strides-SPAPP/app/pages/home/maps/Maps.js

@@ -1,38 +1,113 @@
 
 import React, { useEffect, useRef } from 'react';
-import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
+import { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from 'react-native-maps';
+import MapView from "@allisonadam81/react-native-super-clusters";
 //import Maps1 from './Maps1'
 //import Maps2 from './Maps2'
 //import Maps3 from './Maps3'
-import { MyMarker } from './Cluster';
+import { MyCluster, MyMarker } from './Cluster';
+import { StyleSheet } from 'react-native';
 
-const MapOnly= ({region, stopList, onMapReady, onMarkerPress}) => {
+const MapOnly= React.memo(({
+  ready=false,
+  region, onMapReady, stopList, useApplesMap, showUserLocation=true, onMarkerPress
+}) => {
   const mapRef = useRef();
+  const superClusterRef = useRef();
   useEffect(() => {
-    console.log('mapRef.current', mapRef.current);
+    console.log("MapOnly useEffect", "地图初始化");
+    if (mapRef?.current) {
     //mapRef.current.animateToRegion(region, 500);
-    mapRef.current.animateCamera({ center: region, zoom: 17 }, { duration: 500 }); //移动地图到当前位置并放大
+      mapRef.current.animateCamera({ center: region, zoom: 17 }, { duration: 500 }); //移动地图到当前位置并放大
+    }
   }, [region])
+
+  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}
+        onOpen1={latlng => openClusterMarker(latlng)}/>
+    );
+  }
+
+  const openClusterMarker = async (latlng) => {
+    var camera = await mapRef.current.getCamera();
+    camera.center = latlng
+    if (camera.zoom < 10) {
+      camera.zoom = 10;
+    }
+    if (camera.zoom > 15) {
+      camera.zoom += 1
+    } else {
+      camera.zoom += 2
+    }
+    console.log('camera', camera);
+    mapRef.current.animateCamera(camera, 300);
+  }
+
   return (
     <MapView
       ref={mapRef}
-      style={ui.flex1}
+      superClusterRef={superClusterRef}
+      style={StyleSheet.absoluteFillObject}
+      minZoom={5}
+      maxZoom={20}
+      radius={45}
+      extent={100}
+      nodeSize={128}
+      showsIndoors={false}
+      showsTraffic={false}
+      toolbarEnabled={false}
       initialRegion={region}
+      tintColor={colorAccent}
       onMapReady={onMapReady}
-      provider={PROVIDER_GOOGLE}
-      showsUserLocation={true}>
+      poiClickEnabled={false}
+      zoomControlEnabled={false}
+      tracksViewChanges={true}
+      showsMyLocationButton={!ready}
+      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>
-  )
-}
+  );
+});
+
 
 export default {
   //Maps1: Maps2,