Premisa: tengo un conjunto de datos (paradas en el mapa) cargados a través de geoJSON en una fuente agrupada, cada una de estas ubicaciones de parada puede tener un ícono diferente.

Tengo más de 140 variaciones de iconos. Estoy iterando a través de todos ellos y genero una capa de tipo "símbolo" para cada uno.
Además, estoy cargando cada imagen de icono de parada (formato png) a través map.loadImage() .

Problema: el problema al que me enfrento es que el tiempo de carga es muy alto y el mapa no es fluido hasta que se cargan y muestran todas las capas.

¿Puede ayudarme con una sugerencia sobre cómo reducir el tiempo de carga y aumentar el rendimiento?

LaCapa.tsx

 export default React.memo(function MyStopsLayers(props: Props) { return ( <> {ICONS.map(icon => props.isEditMode ? ( <EditStopLayer key={icon.id} icon={icon} {...props} /> ) : ( <StopLayer key={icon.id} iconType={icon} {...props} /> ), )} </> ); });

StopLayer.tsx

 const StopLayer: React.FC<Props & { icon: Icon }> = ({ icon, showOrderNumber }) => { return ( <> <Layer key={icon.id} id={icon.id} type="symbol" source={MAP_CLUSTERS_SOURCE} filter={['all', ['!', ['has', 'point_count']], ['==', ['get', 'icon'], icon.id]]} paint={{}} layout={{ 'symbol-z-order': 'source', 'symbol-sort-key': 1, 'icon-image': icon.id, 'icon-size': 0.5, 'icon-allow-overlap': true, }} /> {showOrderNumbers && ( <Layer key={icon.id + 'orderNumber'} id={icon.id + 'orderNumber'} type="symbol" minzoom={15} source={MAP_CLUSTERS_SOURCE} filter={[ 'all', ['!', ['has', 'point_count']], ['==', ['get', 'icon'], iconType.id], ]} paint={{ 'text-halo-color': '#fff', 'text-halo-width': 15 }} layout={{ 'symbol-z-order': 'source', 'text-field': showOrderNumber ? ['get', 'orderNo'] : '', 'text-offset': [0, 1.25], 'text-size': 15, }} /> )} </> ); };