MapBoxGL，多層性能問題

Question

前提：我有一組數據（地圖上的停靠點）通過 geoJSON 加載到集群源中，每個停靠點位置都可以有不同的圖標。

我有超過 140 種不同的圖標。 我正在遍歷所有這些，並為每個生成一個“符號”類型層。
另外，我正在通過map.loadImage() 。

問題：我面臨的問題是加載時間非常長，並且在加載並顯示所有圖層之前地圖並不平滑。

你能幫我提一個關於如何減少加載時間和提高性能的建議嗎？

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

停止層.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

對於所有停靠點，您可以而且應該只有一層。 為每個圖標設置不同圖標的方法是使用數據驅動樣式，例如，請參閱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']
    },