react-native-map-clustering的性能问题

Question

我从立交桥API (OpenStreetMap)加载一些标记，并在ClusterMap中显示它们。虽然现在标记是集群化的，但App的性能很差，交互延迟也很长。是否有可能获得更好的交互性?

世博会:https://expo.dev/@ezcodeezlife/markercluster-test

代码:

import { ActivityIndicator, FlatList, Text, View, StyleSheet  } from 'react-native';
import { Marker } from 'react-native-maps'; 
import { ClusterMap, AnimatedRegion  } from 'react-native-cluster-map'; 
//This function was provided here: https://github.com/react-native-maps/react-native-maps/issues/356#issuecomment-515694070
export const getBoundByRegion = (region, scale = 1) => {
}
export default App = () => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [region, setRegion] = useState({
latitude: 50.22364,
longitude: 8.4491,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});

const getBenches = async () => {
try {
const response = await fetch('https://overpass.openstreetmap.fr/api/interpreter?data=[out:json];(node[%27amenity%27=%27bench%27](50.22364307664712,8.449115594560567,50.24036141038248,8.46567765838438);node[%27leisure%27=%27picnic_table%27](50.22364307664712,8.449115594560567,50.24036141038248,8.46567765838438););out%20body;');
const json = await response.json();
setData(json);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
const getNewBenches = async (bounds) => {
try {
const response = await fetch("https://overpass.openstreetmap.fr/api/interpreter?data=[out:json];node[%27amenity%27=%27bench%27](" + bounds.minLat +"," + bounds.minLng + "," + bounds.maxLat + "," + bounds.maxLng + ");out%20body;");
const json = await response.json();
setData(json);
} catch (error) {
console.error(error);
} finally {
}
}
useEffect(() => {
getBenches();
}, []);
if(isLoading == false) {
return (
<>
<View>
<ClusterMap 
style={styles.container}
region={ region }
mapType={"satellite"}
onRegionChangeComplete={(region) => {
setRegion(region);
getNewBenches(getBoundByRegion(region));
} }
//onMapReady={() => onMapReady()}
>
{data.elements.map((marker) => (
<Marker
tracksViewChanges={false}
key={marker.id}
coordinate={{ latitude: marker.lat, longitude:  marker.lon }}
/>
))}
</ClusterMap >
</View>
</>
)
} else {
return (
<View>
<ActivityIndicator />
</View>
)
}
};
//styles

有可能获得更好的交互性吗?

Answer 1

我有一个类似的问题，这是因为我在代码中留下了许多控制台日志。移除它们后，我的地图互动性变得更好了。尽量删除不必要的控制台日志。