使用动画标记时如何优化反应本机地图性能

Question

我正在尝试优化react-native-maps 性能。 这是我定制的

Marker

export function usePrevious(value) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

function VehicleMarker({CarSetting, car, onOpen}) {
  const [marker, setMarker] = useState(null);
  const [CarIcon, setCarIcon] = useState(Car);
  const [coordinate] = useState(
    new AnimatedRegion({
      latitude: car.Lt,
      longitude: car.Ln,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  );
  const [CarType, setCarType] = useState(0);
  const [tracksViewChanges, setTracksViewChanges] = useState(false);

  const prevCoordinate = usePrevious(coordinate);

  useEffect(() => {
    if (prevCoordinate !== coordinate) {
      setTracksViewChanges(true);
    } else {
      setTracksViewChanges(false);
    }
  }, [coordinate]);

  useEffect(() => {
    animateMarker();
    setCarIcon(getCarImage(CarSetting, car));
    setCarType(
      CarSetting?.find(setting => setting.CarID == car.CarID)?.CarTypeID,
    );
  }, [car]);

  const animateMarker = () => {
    const newCoordinate = {
      latitude: car.Lt,
      longitude: car.Ln,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    };

    if (Platform.OS === 'android') {
      if (marker) {
        marker.animateMarkerToCoordinate(newCoordinate, 5000);
      }
    } else {
      coordinate.timing(newCoordinate).start();
    }
  };

  return (
    <Marker.Animated
      key={car.CarID}
      ref={marker => {
        setMarker(marker);
      }}
      coordinate={coordinate}
      onPress={onOpen}
      anchor={{x: 0.5, y: 0.5}}
      rotation={CarType == 0 ? 360 - car.Angle : 0}
      tracksViewChanges={tracksViewChanges}>
      <Animated.View style={styles.markerWrap}>
        <Animated.Image source={CarIcon} style={styles.marker} />
      </Animated.View>
    </Marker.Animated>
  );
}

我有大约 80 辆车，其中一半总是在行驶中，我每 15 秒更新一次它们的坐标。每辆车都有一个标记是车牌号（因为我不希望它旋转，所以我将其克隆到其他组件中）。

30辆车以下运行平稳。但超过 30 就变得迟钝了。我无法将它们聚集在一起，因为我们的客户希望看到所有这些。

有什么解决办法吗？

Answer 1

我的解决方案是降低图像的分辨率（到我想要的大小，在我的例子中是 30x30 px）并使用图标而不是图像。

      <Marker.Animated
        ref={marker => {
          setVehicle(marker);
        }}
        coordinate={coordinate}
        onPress={onOpen}
        anchor={{x: 0.5, y: 0.5}}
        rotation={CarType == 0 ? 360 - car.Angle : 0}
        tracksViewChanges={tracksViewChanges}
        icon={CarIcon}>
        {/* <Animated.View style={styles.markerWrap}>
          <Animated.Image source={CarIcon} style={styles.marker} />
        </Animated.View> */}
      </Marker.Animated>

Answer 2

我需要帮助设置标记动画，我正在阅读文档，但我陷入了困境 我的问题