react-map-gl绘制基础多边形失败 代码问题排查

• GeoJSON几何类型配置错误：fill是react-map-gl图层的渲染类型，不属于GeoJSON标准几何类型，面状要素的几何类型需设置为Polygon。
• Polygon坐标格式不符合规范：GeoJSON中Polygon类型的坐标要求为三维嵌套数组，结构为[外环坐标数组, 可选的内环/洞坐标数组...]，当前代码传入的是二维数组；同时多边形外环必须闭合，坐标序列最后一个点需要与第一个点坐标完全一致。
• 数据源与图层绑定失效：Source组件的id为polylineLayer，但Layer组件的source属性填写为my-data，图层无法关联到对应数据源，无法触发渲染。
• 组件ID冲突：Source与Layer使用了完全相同的id值，会引发react-map-gl内部资源注册异常，需为二者设置独立唯一的id。

<Source 
  id="polygonSource" 
  type="geojson" 
  data={{
    type: "Feature",
    properties: {},
    geometry: {
      type: "Polygon",
      coordinates: [
        [
          [72.5497762170623, 31.758420926179284], 
          [75.71927578293769, 31.758420926179284],
          [75.6761122711823, 29.06347507382072], 
          [72.59293972881768, 29.06347507382072],
          // 闭合多边形，回到起始点
          [72.5497762170623, 31.758420926179284]
        ]
      ]
    }
  }}
>
  <Layer
    id="polygonFillLayer"
    type="fill"
    source="polygonSource"
    paint={{
      'fill-color': '#FFAA01',
      'fill-opacity': 0.5
    }}
  />
</Source>

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