React Simple Maps渲染TopoJSON多边形出现反向显示问题求助

算力阿峰

2026-8-12

React Simple Maps 多边形渲染异常（挖空状态）解决方法

问题现象

使用React Simple Maps渲染自定义TopoJSON多边形时，出现地图整个区域被填充、目标多边形呈挖空状态的异常，与预期的简单多边形渲染效果不符。

问题原因

异常源于TopoJSON中多边形顶点的环绕方向：SVG默认采用非零环绕数填充规则，当多边形顶点按顺时针顺序排列时，会被解析为“内部洞”，从而出现外部填充、内部挖空的反向效果。你的TopoJSON中多边形顶点正是顺时针排列的。

解决方案

将TopoJSON中arcs数组内的顶点顺序反转（改为逆时针排列）即可修复。

修改后的TopoJSON代码

{
  "type": "Topology",
  "objects": {
    "collection": {
      "type": "GeometryCollection",
      "geometries": [{ "type": "Polygon", "arcs": [[0]] }]
    }
  },
  "arcs": [
    [
      [-12.260535998018383, 62.14792267500428],
      [17.105272580928016, 71.36229082737557],
      [43.9572765344397, 70.27381439382373],
      [48.070775012424235, 43.55191645077076],
      [10.820761017340033, 35.82827731956981],
      [-13.974493697178218, 35.17713854785707],
      [-12.260535998018383, 62.14792267500428]
    ]
  ]
}