MapBoxGL, multiple layers performance issue-CodePudding

Premise: I have a set of data (stops on the map)loaded via geoJSON in a clustered source, each of these stop locations can have a different icon.

I have over 140 variations of icons. I am iterating through all of them and I generate a "symbol" type layer for each one.
Also, I am loading each stop icon image(png format) via map.loadImage().

Problem: The issue that I am facing is that the loading time is very high and the map isn't smooth until all the layers are loaded and displayed.

Can you please help me with a suggestion on how to reduce the loading time and increase the performance?

TheLayer.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,
          }}
        />
      )}
    </>
  );
};

CodePudding user response：

You can and should have only one layer for all your stop locations. The way you set a different icon for each one is by using data-driven styling, see this for example.

First you load the images:

 map.addImage("someIcon1", iconResource1)
 map.addImage("someIcon2", iconResource2)

Then, in the source you add the icon id to an "icon" property for each stop location:

const feature = {
            id: data.id,
            type: 'Feature',
            properties: {
                id: data.id,
                icon: "someIcon1" // use the icon id here
            },
            geometry: {
                //...
            }
        };

And then, in the layer layout property you would get the icon from the source:

 layout: {
        'icon-image': ['get', 'icon']
    },