`react-map-gl` - 使用源和图层组件在地图上渲染数千个多边形

问题描述 投票:0回答:1

我有一个 API 端点,它返回大约 10,000 个多边形,每个多边形都是一个 Feature。我需要在地图中显示所有这些多边形。

如果我调整 API 以将所有这些多边形作为 FeatureCollection 返回,并将此 FeatureCollection 作为

data
道具发送到源组件,则地图渲染不会出现任何问题。但是这样做会限制我选择多边形并向所选多边形添加不同的图层样式(例如:type =“line”)。

因此,我需要循环遍历所有功能,并查看并将功能作为

data
属性发送到源组件。 当我这样做时,浏览器崩溃了。

<MapGL
 ref={mapRef}
 {...mapState}
 {...viewport}
 onViewStateChange={_handleViewport}
 onClick={handleMapClick}
>
{plantLocations.map((pl, index) => (
  <Source key={`${pl.properties.id}-source`} type="geojson" 
     data={pl} 
     key={`${pl.properties.id}-source`}
     id={pl.properties.id}
    >                            // plantLocation is a Feature
    <Layer
      id={`${pl.properties.id}-layer`}
      type="fill"
      paint={{
      'fill-color': 'blue', 
      'fill-opacity': 0.6, 
       }}
    />
    {((selectedPl && selectedPl.id === pl.properties.id) ||
      (hoveredPl && hoveredPl.id === pl.properties.id)) && (
      <Layer
        key={`${pl.properties.id}-selected`}
        id={`${pl.properties.id}-selected-layer`}
        type="line"
        source={pl.properties.id}
        paint={{
          'line-color': '#007A49',
          'line-width': 4,
        }}
       />
     )}
  </Source>
))}
     // NavigationControl
</MapGL>

我该如何解决这个问题,以便我能够单击图层并添加其他样式并对其进行操作?

mapbox mapbox-gl react-map-gl
1个回答
0
投票

您需要将多边形渲染为

FeatureCollection
,但在同一个
Layer
组件下添加两个单独的
Source
- 一个用于图层本身,另一个用于突出显示。

您可以将不同的样式应用于第二层,并更改

filter
属性的值,以仅对满足特定条件的多边形设置样式。例如:

const countiesLayer = {
  id: 'counties',
  type: 'fill',
  'source-layer': 'original',
  paint: {
    'fill-outline-color': 'rgba(0,0,0,0.1)',
    'fill-color': 'rgba(0,0,0,0.1)'
  }
};

const highlightLayer = {
  id: 'counties-highlighted',
  type: 'fill',
  source: 'counties',
  'source-layer': 'original',
  paint: {
    'fill-outline-color': '#484896',
    'fill-color': '#6e599f',
    'fill-opacity': 0.75
  }
};

const filter = ['in', 'COUNTY', selectedCounty], [selectedCounty];

<Source type="vector" url="mapbox://mapbox.82pkq93d">
 <Layer beforeId="waterway-label" {...countiesLayer} />
 <Layer beforeId="waterway-label" {...highlightLayer} filter={filter} />
</Source>

请参阅原始demo源代码以供参考。

© www.soinside.com 2019 - 2024. All rights reserved.