MapBoxGL，多层性能问题

Question

前提： 我有一组数据（在地图上停止）通过 geoJSON 在集群源中加载，每个停靠点都可以有不同的图标。

我有超过 140 种不同的图标。我正在遍历所有这些，并为每个生成一个“符号”类型层。
此外，我正在通过 map.loadImage().

加载每个停止图标图像（png 格式）

问题： 我面临的问题是加载时间非常长，并且在加载和显示所有图层之前地图不平滑。

能否就如何减少加载时间和提高性能提出建议？

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

Answer 1

您可以而且应该只为所有停靠点设置一层。例如，为每个图标设置不同图标的方法是使用 data-driven styling, see this。

首先加载图像：

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

然后，在源代码中，您将图标 ID 添加到每个停止位置的“图标”属性：

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

然后，在图层布局中属性您将从源中获取图标：

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

MapBoxGL，多层性能问题

MapBoxGL, multiple layers performance issue

javascript

performance

mapbox

reactjs

mapbox-gl-js