使用rnmapbox在地图展示多个多边形报错，求正确实现示例

错误提示的核心原因是循环渲染时所有图层的ID重复：你在map循环里给每个ShapeSource、FillLayer、LineLayer都设置了固定的id（比如source、fill、line），Mapbox会认为你在重复引用已存在的图层，因此抛出这个弃用警告。

修正后的代码示例 #

给每个图层的ID添加循环索引，保证全局唯一：

{polygons.map((polygon, index) => (
  <MapboxGL.ShapeSource
    key={index}
    id={`source-${index}`} // 唯一化数据源ID
    shape={definePolygon(polygon)}
  >
    <MapboxGL.FillLayer
      id={`fill-${index}`} // 唯一化填充层ID
      style={{
        fillColor: "grey",
        fillOpacity: 0.5,
      }}
    />
    <MapboxGL.LineLayer
      id={`line-${index}`} // 唯一化边线层ID
      style={{ lineColor: "black", lineWidth: 2 }}
    />
  </MapboxGL.ShapeSource>
))}

补充说明 #

1. definePolygon函数要求：必须返回符合GeoJSON规范的Polygon类型数据，示例结构如下：

const definePolygon = (polygonData) => {
  // 假设polygonData包含一组经纬度坐标数组
  return {
    type: 'Polygon',
    coordinates: [
      polygonData.coords // 格式：[[lng1, lat1], [lng2, lat2], ..., [lng1, lat1]]
    ]
  };
};

2. 性能优化建议：如果多边形数量较多，建议使用单个ShapeSource承载所有多边形的GeoJSON集合（FeatureCollection），而非循环创建多个ShapeSource，这样能提升渲染性能：

// 先将所有多边形转为FeatureCollection
const polygonFeatures = {
  type: 'FeatureCollection',
  features: polygons.map(polygon => ({
    type: 'Feature',
    geometry: definePolygon(polygon)
  }))
};

// 单个ShapeSource渲染所有多边形
<MapboxGL.ShapeSource
  id="polygons-source"
  shape={polygonFeatures}
>
  <MapboxGL.FillLayer
    id="polygons-fill"
    style={{ fillColor: "grey", fillOpacity: 0.5 }}
  />
  <MapboxGL.LineLayer
    id="polygons-line"
    style={{ lineColor: "black", lineWidth: 2 }}
  />
</MapboxGL.ShapeSource>

内容的提问来源于stack exchange，提问作者Portal